jquery表单验证小结

jquery表单验证小结

下面将讲述的是一个完整的jquery表单验证实例，该实例覆盖了jquery验证的大部分知识点，比如验证框架，messages的扩展和自定义方法的定义以及在验证中的应用等，接下来我将验证的实例分为两部分，前台和后台。

前台：

1.定义一个表单并编写表单内容，下面的定义需要注意，每个input建议同时定义id和name
<form id="myform" method="post">
<table>
<tbody>
<tr>
<td>用户名</td>
<td>
<input type="text" id="username" name="username" /></td>
<td></td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" id="firstpwd" name="firstpwd" /></td>
<td></td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" id="secondpwd" name="secondpwd" /></td>
<td></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" id="sex" name="sex" />男
<input type="radio" id="sex1" name="sex" />女
</td>
<td></td>
</tr>
<tr>
<td>年龄</td>
<td>
<input type="text" id="age" name="age" /></td>
<td></td>
</tr>
<tr>
<td>邮箱</td>
<td>
<input type="text" id="email" name="email" /></td>
<td></td>
</tr>
<tr>
<td>个人网页</td>
<td>
<input type="text" id="purl" name="purl" /></td>
<td></td>
</tr>
<tr>
<td>手机</td>
<td>
<input type="text" id="mobile" name="mobile" /></td>
<td></td>
</tr>
<tr>
<td>附件</td>
<td>
<input type="file" id="afile" name="afile" /></td>
<td></td>
</tr>
<tr>
<td colspan="3">
<input type="submit" id="submit" name="submit" value="保存" />
<button id="btn">重置</button>
</td>
</tr>
</tbody>
</table>
</form>

2.定义验证通过和验证失败的提示信息样式
<style type="text/css">
label
{
font-size: smaller;
width: 10em;
float: left;
}

label.invalid
{
color: red;
padding-left: 18px;
vertical-align: top;
width: 196px;
background: url('../../Content/themes/base/Image/onError.gif') no-repeat;
}

label.valid
{
background: url('../../Content/themes/base/Image/onCorrect.gif') no-repeat;
color: #065FB9;
}
</style>

3.接下来将进入jquery验证的核心部分，在开始之前请确保前台页面引用以下两个js插件
<script src="../../Scripts/jquery-1.7.1.min.js"></script>
<script src="../../Scripts/jquery.validate.min.js"></script>

确定引用之后我们开始定义jquery表单验证的核心框架，该框架由若干部分组成，下面我们列出能满足我们普通验证常用的几部分内容，比如：调试模式的控制、rules的定义、messages的定义和重写、验证成功和失败的处理、自定义验证和应用自定义验证。

验证的主体框架如下所示：

$("#formid").validate({
debug: true,
rules: {
//规定表单中各项的验证规则，规则有一部分是系统封装定义好的，可根据验证需求自己增加自定义验证方法
},
messages: {
//规定验证失败所提示的信息
},

onfocusout: false,//为true则焦点离开时验证，如果表单中没有输入任何内容，所有的规则将被跳过，除非该 表单被标记为无效
focusInvalid: true,//为true则当验证无效时，焦点跳到第一个无效的表单元素，否则没有焦点响应
onkeyup: false,//为true则当键盘按键弹起时验证，若表单元素没有被标记成无效的，不会有任何反应

submitHandler: function (form) {
//验证成功后提交表单
},
errorClass: "invalid",//验证失败样式定义，其中invalid为样式名称
errorPlacement: function (error, element) {
error.appendTo($(element).parent("td").next("td")) //定义验证提示信息显示的位置
},
highlight: function (element, errorClass) {
$(element).addClass(errorClass);//添加验证失败样式，errorClass在上面已经定义好
},
success: function (label) {
$(label).html(" ").addClass("valid");//添加验证成功样式，valid在上面样式表已有定义
}
});

接下来将列出一个完整的验证框架，包括remote（ajax异步验证用户是否被注册）、自定义验证方法、重写messages等

<script type="text/javascript">
$(function () {
//自定义手机号码验证
jQuery.validator.addMethod("isMobile", function (value, element) {
var tel = /^0?1[358]\d{9}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的手机");

$("#myform").validate({
debug: true,
rules: {
username: {
required: true,
minlength: 2,

//ajax异步验证，验证用户是否已被注册
remote: {
url: '/Home/IsUserExist',
type: "get",
dataType: "json",
data: {
username: function () {
return $("#username").val();
}
}
}
},
firstpwd: {
required: true,
rangelength: [6, 8]
},
secondpwd: {
required: true,
equalTo: "#firstpwd"
},
sex: {
required: true
},
age: {
required: true,
range: [0, 120]
},
email: {
required: true,
email: true
},
purl: {
required: true,
url: true
},
mobile: {
required: true,
isMobile: true
},
afile: {
required: true,
accept: "xls,doc,rar,zip"
}
},
messages: {
username: {
required: "用户名是必须的",//如果把这条语句注释掉，则username为空时提示的信息按照下面扩展的规定提示“必填字段”
minlength: $.format("用户名至少要{0}个字符"),
remote: $.format("用户{0}已经被注册")
},
firstpwd: {
required: "密码是必须的",
rangelength: $.format("密码要在{0}-{1}个字符之间")
},
secondpwd: {
required: "确认密码是必须的",
equalTo: "和第一次输入的密码不一致"
},
sex: {
required: "性别是必须的"
},
age: {
required: "年龄是必须的",
range: $.format("年龄必须介于{0}-{1}之间")
},
email: {
required: "邮箱是必须的",
email: "请输入正确的邮箱地址，如yjy@hotmail.com"
},
purl: {
required: "个人主页是必须的",
url: "请输入正确的网址格式，如http://www.baidu.com"
},
mobile: {
required: "手机是必须的",
isMobile: "请正确填写您的电话号码"
},
afile: {
required: "附件是必须的",
accept: "只接收xls,doc,rar,zip格式的文件"
}
},

//onfocusout: false,
focusInvalid: true,
//onkeyup: false,

submitHandler: function (form) {
alert("提交表单");
},
errorClass: "invalid",
errorPlacement: function (error, element) {
error.appendTo($(element).parent("td").next("td"))
},
highlight: function (element, errorClass) {
$(element).addClass(errorClass);
},
success: function (label) {
$(label).html(" ").addClass("valid");
}
});

//下面是messages的重写，只要上面messages内部元素定义不写required的内容则默认按照下面定义的信息显示
jQuery.extend(jQuery.validator.messages, {
required: "必填字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),
minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});
})
</script>

后台：

后台的代码相对比较简单，只要定义一个与前台ajax异步验证对应的处理逻辑即可

public JsonResult IsUserExist()
{
string username = Request.QueryString["username"];
bool flag = false;
if (username != "yjy")
flag = true;
return new JsonResult() { Data = flag, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}

此处为测试使用，若在现实开发系统时上面的if (username != "yjy")可能需要改成与数据库的用户列表进行对比判断。

如果你成功了，显示的效果如下图所示（哈哈^_^，祝你成功...）



至此，整个jquery表单验证实例的讲解已结束，这是我个人亲自尝试的一个实例，希望对大家有帮助。