目录：
① 方案一、不借助插件方法
② 方案二、使用插件jQuery.validate
③ 附：常用正则表达式
** 方案一、不借助插件方法 **
只是提供了一个简单的、较为完整的、可复用的
JS校验实现方案，插件不一定能够覆盖项目中所有需要校验的地方，这个方案只是对插件的补充，实现规则也可以按照特殊需求进行更改，较为灵活。
使用方法：（依赖
jQuery）
1、定义正则库，如果规则较多，可以单独建立.js文件，格式：
var正则名 = {
“re” :正则表达式,
“tip” : “不符合规则时提示文字”
}
如：
var re_null = {
"re" : /\S/,
"tip" : "内容不能为空"
}
var re_name = {
"re" : /[\u4e00-\u9fa5]/,
"tip" : "姓名只允许输入中文"
};
2、引入函数
function check(obj){
//obj参数为对象格式，具体查看下一步
$(“.error_span”).remove();
var onoff=true;
//循环参数中规定的需要校验的输入框
for(var key in obj){
if( obj[key]["re"].test( $("."+key).val() ) ){
//....
}else{
$("."+key).after("<span class='error_span' style='padding-left:10px;color:#f00;'>"+obj[key]["tip"]+"</span>")
onoff=false;
}
}
//如果循环体中正则验证全部通过，则onoff不变，依然是true，如果有一个或多个不符合正则，则onoff变为false。
//返回布尔变量
return onoff;
}
3、调用
check({
"input1_class":re_null,
"input2_class":re_name
})
参数对象中，键名为需要校验输入框的class，值为第一步中对应的正则变量名。注意,class不要重名，或者改变check()函数中相应写法。
** 方案二、使用插件 jQuery.validate **
相关连接：
http://www.runoob.com/jquery/jquery-plugin-validate.html
Validate功能强大，使用灵活，更适用于大面积输入的校验。
使用方法：
1、下载并引入插件
<script src="validate/jquery.validate.js"></script>
<script src="validate/additional-methods.js"></script>
<script src="validate/messages_zh.js"></script>
依次为：插件核心js、正则库文件、中文信息提示包文件。
插件提供了几种常见的校验规则，如需自定义，在正则库文件中新添加规则即可调用。
2、
//校验函数
function validateFn(){
//调用并返回该方法
return $("#login_form").validate({
// debug: true,
rules: {
//校验规则，对应输入框的name值
user_account:{
required : true
},
user_pwd:{
required : true
}
},
messages: {
//此处不填则显示默认错误提示，需要自定义时在此填写
user_account: {
required:"用户名或密码不能为空"
},
user_pwd: {
required:"用户名或密码不能为空"
}
}
});
}
3、根据校验结果进行下一步操作
var result = validateFn().form(); //布尔值
if( result ){
//....
}else{
//....
}
4、说明：
-
以上的使用方法对校验后续操作较为灵活，还有其他使用方法，比如在form表单submit时触发校验等。具体参考上方链接。
-
插件中还有很多自定义参数和方法，比如自定义提示标签的类型、自定义提示标签的显示位置、异步验证等，可参考上方链接。
** 附录：常用正则表达式 **
1、非空：/\S/
2、手机号码：/^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/
3、座机号码/传真号码：/^(((\d{2,3}))|(\d{3}-))?((0\d{2,3})|0\d{2,3}-)?[1-9]\d{6,7}(-\d{1,4})?$/
4、身份证号码：/([1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
5、邮政编码：/^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/
6、中文：/^[\u4e00-\u9fa5]+$/
7、英文：/^[A-Za-z]+$/
8、车牌号：/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[警京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川琼]{0,1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/
9、电子邮箱：/^(\w-.)+@(\w-?)+(.\w{2,})+$/
10、组合：/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/（允许中文、英文、数字、下划线）
11、无敌的日期验证，格式：2017/01/01（加入闰年）：/((((1[8-9]\d{2})|([2-9]\d{3}))([-/._])(10|12|0?[13578])([-/._])(3[01]|[12][0-9]|0?[1-9])$)|(((1[8-9]\d{2})|([2-9]\d{3}))([-/.])(11|0?[469])([-/.])(30|[12][0-9]|0?[1-9])$)|(((1[8-9]\d{2})|([2-9]\d{3}))([-/._])(0?2)([-/._])(2[0-8]|1[0-9]|0?[1-9])$)|(([2468][048]00)([-/.])(0?2)([-/.])(29)$)|(([3579][26]00)([-/._])(0?2)([-/._])(29)$)|(([1][89][0][48])([-/.])(0?2)([-/.])(29)$)|(([2-9][0-9][0][48])([-/._])(0?2)([-/._])(29)$)|(([1][89][2468][048])([-/.])(0?2)([-/.])(29)$)|(([2-9][0-9][2468][048])([-/._])(0?2)([-/._])(29)$)|(([1][89][13579][26])([-/.])(0?2)([-/.])(29)$)|(^([2-9][0-9][13579][26])([-/.])(0?2)([-/.])(29)$))/
12、年份：/19|20\d{2}/
13、QQ号：/[1-9][0-9]{4,14}/
14、年龄：
/120|((1[0-1]|\d)?\d)/
15、微信号：/^[a-zA-Z\d_]{5,}$/
16、数字：/^[0-9][1-9][0-9]$
17、非负数：/[+]{0,1}(\d+)$|[+]{0,1}(\d+.\d+)$/
18、非负浮点数：/^\d+(.\d+)?$/
19、正浮点数：/^((0-9)+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9]))$/
20、Html标记：/<(.)>.</\1>|<(.) />/
21、首尾空格：(^\s)|(\s$)
22、IP地址：/(\d+).(\d+).(\d+).(\d+)/g /
23、URL地址：^[a-zA-Z]+://(\w+(-\w+))(.(\w+(-\w+)))(?\s)?$ 或： ^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&~`@]':+!$
24、SQL语句：/^(select|drop|delete|create|update|insert).$/
网友评论