以下函数是常见的表单验证的js函数,真是屌丝们的福音啊。
备注:
1).本文件是gb2312格式。如果拷贝使用的过程中需要跟自己的页面字符集保持一致;
2).如果拷贝使用,需要修改控件的id值,以及显示提示语句的span的id值。
3).以下验证函数中会用到一些正则表达式。常见的政则表达式必须记住。

以下是常用的正则表达式的写法:
中文:/^[\u4E00-\u9FA5]+$/
手机号码:/^(86)?0?1\d{10}$/
EMAIL:
/^[\w-]+[\w-.]?@[\w-]+\.{1}[A-Za-z]{2,5}$/
密码(安全级别中):
/^(\d+[A-Za-z]\w*|[A-Za-z]+\d\w*)$/
密码(安全级别高):
/^(\d+[a-zA-Z~!@#$%^&(){}][\w~!@#$%^&(){}]*|[a-zA-Z~!@#$%^&(){}]+\d[\w~!@#$%^&(){}]*)$/

1. 验证用户名的函数checkUsername():
function checkUsername() {
var input_val = $("#membername").val();
if(input_val == '') {
$('#result_username').html('会员帐号不可以为空!');
return false;
} else {
var pattern = /^[\u4E00-\u9FA5\w\d]{2,20}$/; //这个是会员帐号的正则表达式,根据网站要求,该表达式需要更换
if(pattern.test(input_val) == false) {
$('#result_username').html('会员帐号格式不符合要求!');
return false;
} else {
//以下这个函数是ajax验证用户名是否已经被注册的函数。要与第2项中的代码一同使用。
checkUsernameAjax(input_val);
}
}
}

2. ajax验证用户名是否已经被注册的函数checkUsernameAjax():此函数中使用了一个全局变量flag,不可以忘记。
var flag;
function checkUsernameAjax(input_val) {
var urlpath="index.php?c=register&a=checkusername";
$.post(urlpath , {'name':input_val} , function(msg) {
//以下是ajax验证验证码的内容。异步调用页面的返回值msg内容需要是字符串‘false’或者‘true’。
if(msg == 'false') {
$('#result_username').html('该会员帐号已存在,请重新注册!');
flag = false;
} else {
if(msg == 'true') {
$('#result_username').html('该会员帐号可以注册!');
flag = true;
}
}
});
}

3. 验证密码的函数checkPwd(),其中验证了密码的安全级别。
备注:安全级别是根据密码字符串的组成来确定的。
如果密码都是数字或者字母,那么安全级别低;
如果有字母和数字混合,则安全级别中;
如果其中包含特殊字符,认为安全级别高。
以下三个函数分别是定义密码级别低、中、高的函数。之所以分开写,是为了让代码简洁,也便于重复使用。

//密码级别为低的函数pwdLower(arg)。
function pwdLower(arg) {
var pattern1 = /^[a-zA-Z]+$/;
var pattern2 = /^\d+$/;
if(pattern1.test(arg)==true || pattern2.test(arg)==true) return true;
else return false;
}
//密码级别为中的函数pwdMiddle(arg) 。
function pwdMiddle(arg) {
var Pattern = /^(\d+[A-Za-z]\w*|[A-Za-z]+\d\w*)$/;
if(Pattern.test(arg)==true) return true;
else return false;
}
//密码级别为高的函数pwdHigh(arg)。
function pwdHigh(arg) {
var Pattern = /^(\d+[a-zA-Z~!@#$%^&(){}][\w~!@#$%^&(){}]*|[a-zA-Z~!@#$%^&(){}]+\d[\w~!@#$%^&(){}]*)$/;
if(Pattern.test(arg)==true) return true;
else return false;
}

//验证密码的函数checkPwd(),其中验证了密码的安全级别。
function checkPwd() {
var input_val = $("#password").val();
if(input_val == '') {
$('#result_pwd').html('密码不可以为空!');
return false;
} else {
if(input_val.length>20 || input_val.length<6) {
$('#result_pwd').html(' 密码长度不符合要求!');
return false;
} else {
if(pwdLower(input_val) == true) {
$("#result_pwd").html("密码有效,安全级别低,建议更改!");
} else {
if(pwdMiddle(input_val) == true) {
$("#result_pwd").html("密码有效,安全级别中!");
} else {
if(pwdHigh(input_val) == true) {
$("#result_pwd").html("密码有效,安全级别高!");
}
}
}
}
}
}

4. 验证确认密码的函数checkRepwd():
function checkRepwd() {
var input_val = $("#password").val();
if(input_val == '') {
$('#result_repwd').html('密码不可以为空!');
return false;
} else {
if($("#password").val() != input_val) {
$('#result_repwd').html('确认密码与原密码不一致!');
return false;
} else {
$('#result_repwd').html('确认密码通过验证!');
}
}
}

5. 手机号码的验证函数    checkMpnum():
function checkMpnum() {
var input_val = $("#mpnum").val();
if(input_val == '') {
$('#result_mpnum').html(' 手机号码不可以为空!');
return false;
} else {
var pattern = /^(86)?0?1\d{10}$/;
if(pattern.test(input_val) == false) {
$('#result_mpnum').html('手机号码格式不符合要求!');
return false;
} else {
$('#result_mpnum').html('手机号码通过验证! ');
}
}
}

6. 验证email的函数checkEmail():
function checkEmail() {
var input_val = $("#email").val();
if(input_val == '') {
$('#result_email').html('Email不可以为空!');
return false;
} else {
var pattern = /^[\w-]+[\w-.]?@[\w-]+\.{1}[A-Za-z]{2,5}$/;
if(pattern.test(input_val) == false) {
$('#result_email').html('Email格式不符合要求!');
return false;
} else {
$('#result_email').html('Email通过验证! ');
}
}
}

7. 验证QQ号码的函数checkQQ():
function checkQQ() {
var input_val = $("#qq").val();
if(input_val == '') {
$('#result_qq').html('QQ号码不可以为空!');
return false;
} else {
var pattern = /^\d{5,12}$/;
if(pattern.test(input_val) == false) {
$('#result_qq').html('QQ格式不符合要求!');
return false;
} else {
$('#result_qq').html('QQ通过验证! ');
}
}
}

8. 验证验证码是否正确的函数checkRandcode(),其中使用了ajax验证:
var flag2;
function checkRandcode() {
var input_val = $("#checkcode").val();
if(input_val=="") {
$("#result_checkcode").html("验证码不可以为空!");
return false;
} else {
var pattern = /\d{4}/;
if(pattern.test(input_val) == false) {
$("#result_checkcode").html(" 验证码输入不正确!");
return false;
} else {
//以下是ajax验证验证码的内容。异步调用页面的返回值msg内容需要是字符串‘false’或者‘true’。
var loadUrl = "index.php?c=register&a=checkrandcode";
$.post(loadUrl,{'code':input_val},function(msg) {
if(msg == 'false') {
$("#result_checkcode").html(" 验证码输入不正确!");
flag2 = false;
} else {
if(msg == 'true') {
$("#result_checkcode").html(" 验证码输入正确!");
}
}
});
}
}
}

9. 验证兴趣爱好至少勾选一项的函数:
function checkFonds() {
var count=0;
for(var i = 0; i < $('form  input').size(); i++) {
if($('form  input').get(i).name == "fonds[]") {
if($('form  input').get(i).checked == true) {
count++;
}
}
}
if(count<1) {
$("#result_fonds").html("兴趣爱好至少请选择一项!");
return false;
} else {
$("#result_fonds").html("兴趣爱好已经勾选!");
}
}

10. 点击提交按钮的函数checkSubmit()。
备注:依次将表单中的各项验证函数罗列出来。
如果有ajax验证用户名和验证码的,还要记得判断所定义的两个全局变量flag 、 flag2是否为false。
function checkSubmit() {
var flag3 = true;
if(checkUsername() == false) flag3=false;
if(checkPwd() == false) flag3=false;
if(checkRepwd() == false) flag3=false;
if(checkMpnum() == false) flag3=false;
if(checkEmail() == false) flag3=false;
if(checkQQ() == false) flag3=false;
if(checkFonds() == false) flag3=false;
if(checkRandcode() == false) flag3=false;
if(flag == false) flag3=false;
if(flag2 == false) flag3=false;
return flag3;
}

11. 多选项全选的函数selectAll(flag):
function selectAll(flag) {
for(var i = 0; i < $('#uform input').size(); i++) {
if($('#uform input').get(i).name == "orders") {
$('#uform input').get(i).checked = flag;
}
}
}

<form name="uform" id="uform">
<input name="orders" type="checkbox" value="1" >选项1
<input name="orders" type="checkbox" value="2" >选项2
<input name="orders" type="checkbox" value="3" >选项3
<input name="orders" type="checkbox" value="4" >选项4
</form>
<a href="javascript:selectAll(true);">全选</a>
<a href="javascript:selectAll(false);">取消全选</a>