下面是整个jquery验证的代码:
$(function() {
var flag = true;//判断是否通过验证的标识
var regex = new RegExp(/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/);//emial正则验证表达式
var message = "emial 格式不正确";
var rnick = new RegExp(/\w{6,}/);//昵称正则验证表达式
var mnick = "昵称不能少于六个字母";
var rpwd = new RegExp(/\w{6,}/);//密码正则验证表达式
var mpwd = "密码不能少于六位数";
$("#registerBtn").click(function() {//提交按钮注册点击事件
verification($("#email"), regex, message, $("#email_prompt"));//emial验证
verification($("#nickName"), rnick, mnick, $("#nickName_prompt"));//昵称验证
verification($("#pwd"), rpwd, mpwd, $("#pwd_prompt"));//密码验证
var f = false;//密碼重複驗證
var value = $("#repwd").val();
$("#pwd").val() && value != null ? f = true : f = false;
var data = "两次输入密码不一致";
if (f == false) {
$("#repwd_prompt").html(data);
$("#repwd_prompt").css("color", "red");
flag = false;
} else {
flag = true;
}
$("#repwd").focus(function() {
$("#repwd_prompt").hide();
});
return flag;
});
function verification(n, regex, message, m) {//驗證函數 n传入选定的输入框的元素 regex传入正则表达式 message表示
//显示在输入框后的提示信息 m表示提示框
var value = n.val();
if (!regex.test(value)) {
m.html(message);
m.css("color", "red");
flag = false;
} else {
flag = true;
}
n.focus(function() {//当重新获得焦点输入时隐藏提示
m.hide();
});
}
});
表单验证运行后的效果