在做web时,提交表单经常需要使用js去判断表单填写内容,用一测试哥们的话说就是:永远不要相信用户的输入。
其实这不是原创,乌鸦一直都想做一个基于js或者jq的比较通用的验证,但是乌鸦愚笨,一直做不出来,这次是在看jQuery UI dialog的demo时发现这个验证还算方便。
checkLength()这是校验元素的长度,checkRegx()这是使用正则校验元素的内容。调用的时候,乌鸦发现上面说的那个demo里的调用方法也不错,推荐使用

bValid = bValid && checkLength(card_no,16,16,"卡号的长度只能是16");
bValid = bValid && checkRegx(card_no,/^[0-9]+$/,'卡号只能是数字');

多个表单元素依次校验就可以了。下面贴一个完整的、拿出来就可以直接运行的demo
[code=php]<html>
<head>
<title>myCheckFunc</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function checkForm(){
var bValid = true;
var true_name = $("#true_name");
var user_name = $("#user_name");
var password = $("#pwd");
var card_no = $("#card_no");

bValid = bValid && checkLength(true_name,1,6,"真实姓名的长度大于1小于6");
bValid = bValid && checkLength(user_name,4,10,"用户名的长度大于4小于10");
bValid = bValid && checkLength(password,6,12,"密码的长度大于6小于12");
bValid = bValid && checkLength(card_no,16,16,"卡号的长度只能是16");

bValid = bValid && checkRegx(true_name,/^[\u4e00-\u9fa5a-zA-Z0-9_]+$/,'真实姓名只能是汉字、字母和下划线');
bValid = bValid && checkRegx(user_name,/^[a-zA-Z0-9_]+$/,'用户名只能是数字、字母和下划线');
bValid = bValid && checkRegx(password,/^[a-zA-Z0-9]+$/,'密码只能是数字和字母');
bValid = bValid && checkRegx(card_no,/^[0-9]+$/,'卡号只能是数字');

return bValid;
}

/* 校验元素长度 o:表单元素的jq对象;min:最小长度;max:最大长度;errorMsg:报错信息*/
function checkLength(o,min,max,errorMsg){
if( o.val().length<min || o.val().length>max ){
alert(errorMsg);
return false;
}else{
return true;
}
}

/* 校验元素内容 o:表单元素的jq对象;reg:校验内容的正则表达式;errorMsg:报错信息*/
function checkRegx(o,reg,errorMsg){
if ( !( reg.test( o.val() ) ) ) {
alert(errorMsg);
return false;
} else {
return true;
}
}
</script>

</head>
<body>
<form action="" onsubmit="return checkForm()">
真实姓名:<input type="text" id="true_name" name="true_name"/><br/>
用 户 名:<input type="text" id="user_name" name="user_name"/><br/>
密    码:<input type="password" id="pwd" name="pwd"/><br/>
商通卡号:<input type="text" id="card_no" name="card_no"/><br/>
<input type="submit" value="SUBMIT"/>
</form>
</body>
</html>[/code]
对于项目里之前有使用自己的jQuery函数库的话,那整理成jq的函数库也是再好不过的了,乌鸦也做好了,这个事情就比较简单了,在自己的函数库添加一个函数体,把上面的两个函数稍加调整就OK了。
[code=php](function($){
$.fn.checkLength = function(min,max,errorMsg){
if( $(this).val().lengthmax ){
alert(errorMsg);
return false;
}else{
return true;
}
};
$.fn.checkRegx = function(reg,errorMsg){
if ( !( reg.test( $(this).val() ) ) ) {
alert(errorMsg);
return false;
} else {
return true;
}
};
})(jQuery); [/code]



更多文章请访问:wang153723482.blog.163.com