javascript表单验证及正则表达式

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

1.1、降低服务器压力

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

1.2、提升用户体验

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

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

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

英雄会

*用户名:
用户名长度至少6位

*密码:
密码长度至少8位

*确认密码:
确认密码与密码一致

*性别:
请选择性别
女
男


注册
重置

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;
    }
}