首页 > 网络编程 > JavaScript > javascript技巧 > js表单验证及正则表达式

javascript表单验证以及正则表达式举例详解

2023-05-27 09:12:38 作者：笑谈子云亭

正则表达式描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等,常用于表单验证等,下面这篇文章主要给大家介绍了关于javascript表单验证以及正则表达式的相关资料,需要的朋友可以参考下

1、表单验证的场景与意义

1.1、降低服务器压力

拦截不合格数据，避免直接提交到服务器，可以显著降低服务器开销

1.2、提升用户体验

早期的互联网，表单项非常多，注册账号需要填写20+字段。而其中有一个填写不正确就需要等待几十秒。如果有了表单验证，反馈是实时的，而且脚本还能把你定位到填写错误的具体字段。现在虽然无刷新技术早已普及，但是只依赖服务端进行验证，还是会有几百毫秒的延迟，实际使用时会有一种很严重的粘滞感。

2、表单验证常用事件与属性

表单经常要做一些非空、长度、合法性验证。

<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script>
    function validateName(){
        //所有的表单项元素都是value属性
        var name=document.getElementById("userName").value;
        var msg=document.getElementById("nameMsg");
        if(name==null||name==""){
        	msg.innerHTML="用户名不能为空！";
        	msg.style.color="red";
        	return false;
        }else if(name.length<6){
        	msg.innerHTML="用户名长度必须为大于6的！";
        	msg.style.color="red";
        	return false;
        }
        msg.innerHTML="用户名可用";
        msg.style.color="green";
        return true;
    }
    function validatePwd(){
        var password1=document.getElementById("password1").value;
        var msg=document.getElementById("pwdMsg1");
        if(password1==null||password1==""){
        	msg.innerHTML="密码不能为空!";
        	msg.style.color="red";
        	return false;	
        }else if(password1.length<8){
        	msg.innerHTML="密码长度必须大于等于8";
        	msg.style.color="red";
        	return false;
        }
        msg.innerHTML="密码合法";
        msg.style.color="green";
        return true;
    }
    function confirmPwd(){
        var pwd1=document.getElementById("password1").value;
        var pwd2=document.getElementById("password2").value;
        var msg=document.getElementById("pwdMsg2");
        if(pwd1!=pwd2){
        	msg.innerHTML="两次输入的密码不一致！";
        	msg.style.color="red";
        	return false;
        }
        msg.innerHTML="两次输入的密码一致";
        msg.style.color="green";
        return true;
    }
    function validateGender(){
        var gender=document.getElementById("gender").value;
        if(gender==-1){
        	alert("性别为必选项！");
        	return false;
        }
        return true;
    }
    function register(){
        return validateName()&&validatePwd()&&confirmPwd()&&validateGender();
    }
</script>
</head>
<body>
<h1>英雄会</h1>
<form action="1.html" method="get" onsubmit="return register()">
*用户名:<input type="text" id="userName" placeholder="请输入用户名" onblur="validateName()" />
<span id="nameMsg">用户名长度至少6位</span><br/>
*密码:<input type="password" id="password1" placeholder="请输入密码" onblur="validatePwd()" />
<span id="pwdMsg1">密码长度至少8位</span><br/>
*确认密码:<input type="password" id="password2" placeholder="请确认密码" onblur="confirmPwd()" />
<span id="pwdMsg2">确认密码与密码一致</span><br/>
*性别:<select id="gender">
<option value="-1">请选择性别</option>
<option value="0">女</option>
<option value="1">男</option>
</select><br/>
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</body>

3、JavaScript的RegExp对象-正则表达式

3.1、概念

RegExp:正则表达式(regular expression)的简写

正则表达式(英语：Regular Expression,代码中常常简写为regex、regexp或RE)使用单个字符串来描述、匹配符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。

3.2、语法

var reg=new RegExp(/正则表达式主体/,修饰符(可选));
或者更简单的方法
var reg=/正则表达式主体/修饰符(可选);
 
案例:
var reg=new RegExp(/kaikeba/i);
var reg=/kaikeba/i;//此处定义了一个一个正则表达式
kaikeba 是一个正则表达式主体(用于检索)
i 是一个修饰符(搜索不区分大小写)

3.3 修饰符

可以在全局搜索中不区分大小写

修饰符	描述
i	执行对大小写不敏感的匹配
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m	执行多行匹配

3.4 正则表达式模式

方括号用于查找某个范围内字符。

表达式	描述
[a-z]	查找方括号之间的任何字符
[0-9]	查找任何0-9之间的数字
(x\|y)	查找任何以\|分隔的选项

元字符是拥有特殊含义的字符

元字符	描述
\d	查找数字
\s	查找空白字符
\b	匹配单词边界
\uxxx	查找以十六进制数XXX规定的unicode字符

量词：

量词	描述
n+	匹配任何包含至少一个n的字符串。
n*	匹配任何包含0个或者多个n的字符串。
n?	匹配任何包含0个或者一个n的字符串。

3.5 正则表达式的方法test(str)

test()用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配文本，则返回true，否则返回false。

var reg=/kaikeba/i;
var res=reg.test("开课吧的汉语拼音为kaikeba");
console.log(res);//true
 
var reg=/^[a-zA-Z]+[\u4e00-\u9fa5]*[0-9]$/;
var str="a公司拼音为9";
var res=reg.test(str);
console.log(res);//true
console.log(reg.test("a你好239"));//false

4、常用正则表达式

/* 检查输入的身份证号是否正确  */
function checkCard(str){
    /**
     * 15位数身份证正则表达式：
     * 编码规则顺序从左至右依次为6位数字地址码，6位数字出生年份后两位及日期，3为数字顺序码。
     * [1-9]\d{5}   前六位地区，非0打头
     * \d{2}        出生年份后两位00-99
     * ((0[1-9])|(10|11|12))   月份，01-12月
     * (([0-2][1-9])|10|20|30|31) 日期，01-31天
     * \d{3}    顺序码三位，没有校验码
     */
    if(str==null||(str.length!=15&&str.length!=18)){
    	return false;
    }
    var arg1=/^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/;
    if(str.length==15&&!arg1.test(str)){
    	return false;
    }
    /**
     * 18位数身份证正则表达式：
     * 编码规则顺序从左至右依次为6位数字地址码，8位数字出生年份日期码，3位数字顺序码，1位数字校验码(可为X)。
     * [1-9]\d{5}   前六位地区，非0打头
     * (18|19|([23]\d))\d{2}   出生年份，覆盖范围1800-3999年
     * ((0[1-9])|(10|11|12))   月份，01-12月
     * (([0-2][1-9])|10|20|30|31)  日期，01-31天
     * \d{3}[0-9Xx]           顺序码三位+一位校验码
     */
    var arg2=/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
    if(str.length==18 && !arg2.test(str)){
    	return false;
    }
    return true;
}
/*是否是小数*/
function isDecimal(strValue){
    var objRegExp=/^\d+\.\d+$/;
    return objRegExp.test(strValue);
}
/*校验是否中文名称组成*/
function ischina(str){
    var reg=/^[\u4E00-\u9FA5]{2,4}$/;
    return reg.test(str);
}
/*检验是否全由8位数字组成*/
function isNum(str){
    var reg=/^[0-9]{8}$/;
    return reg.test(str);
}
/*校验手机号*/
function isPhoneNum(str){
    //如果你要精准验证手机号码，那个你可以使用第一个正则。这是根据电信，移动，联通目前发行的号码来的，验证比较精准。
    var reg=/^1[3|4|5|7|8][0-9]{9}$/;
    //如果因为现有号码不能满足市场需求，电信服务商会增大号码范围。所以一般情况下我们只要验证手机号码为11为并且以1开头。
    var reg=/^1[0-9]{10}$/;
    return reg.test(str);
}
/*检验右键地址是否合法*/
function IsEmail(str){
    var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
    return reg.test(str);
}
/*检查输入的URL地址是否正确*/
function checkURL(str){
    if(str.match(/http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/i)==null){
    	return false;
    }else{
    	return true;
    }
}

总结

到此这篇关于javascript表单验证以及正则表达式的文章就介绍到这了,更多相关js表单验证及正则表达式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！