jquery验证插件 js表单验证

写道

关键字: jquery验证插件

jquery validation 是一款功能很强大的验证插件，下载地址http://bassistance.de/jquery-plugins/jquery-plugin-validation/。下载完解压缩后可以看到里面有几个js文件和一些文件夹，其中比较重要的一个js文件是jquery.validate.js,三个文件夹分别是demo lib 和localization。demo中是一些例子，例子不多但是都很实用，lib中是一些js而localization中则是一些提示信息，比如说某个字段该填没填就会提示相应的必填信息。

现在我做一个注册的验证示例：
需要字段 规则
username 必填 长度2－15 只能包含字母数字和下划线、中文
password 必填 长度6－16
repassword 必填 长度6－16 值必须和密码一样
email 必填 必须符合邮件的格式
首先引入相关的js
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/messages_cn.js"></script>
第一个是jquery的js,第二个是jquery.validate验证插件的js 第三个是提示中文信息的js 这个个js位于jquery_validate/localization目录下。
<style type="text/css">
form.zhuceForm {
width: 50em;
}

em.error {
background: url("../images/error_r.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-top: 0px;
}

em.success {
background: url("../images/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}

form.zhuceForm label.error {
margin-left: auto;
width: 250px;
}

em.error {
color: red;
}
</style>
<script>
jQuery.extend(jQuery.validator.messages, {
required: "必填字段",//这里是修改它默认的提示信息
equalTo: "两次密码输入不一致"//这里是修改它默认的提示信息
});

$(document).ready(function() {

// 字符验证
jQuery.validator.addMethod("username", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value); //字符的unicode
}, "用户名只能包括中文字、英文字母、数字和下划线");

$("#zhuceForm").validate({

errorElement: "em",
errorPlacement: function(error, element) {
error.appendTo(element.next().next());//表示提示信息的位置，这里为每个input后面的div
}
});

});
</script>
<form action="#" id="zhuceForm" method="post">
<table border="0" cellpadding="5" cellspacing="5">
<tbody>
<tr>
<td valign="top" width="100" align="right"><span class="hot">
* </span> 用户名：</td>
<td><input name="username" id="username" size="35"
minlength="2" maxlength="15" class="input required username "
/><small class="hint"> 2-15位
可以包含中文、字母、数字和下划线,做为登录用。</small>
<div id="checkUsername"></div>
</td>
<td></td>
</tr>
<tr>
<td valign="top" align="right"><span class="hot"> * </span>
登录密码：</td>
<td><input type="password" name="password"
id="password" size="35" minlength="6" maxlength="16"
class="input required" value="" /><small class="hint"> 6-16位。</small>
<div id="checkPassword" style="font-style: red"></div>
</td>
<td></td>
</tr>
<tr>
<td valign="top" align="right"><span class="hot"> * </span>
重复登录密码：</td>
<td><input type="password" name="repassword" id="repassword"
size="35" minlength="6" maxlength="16" class="input required"
equalTo="#password" value="" /><small class="hint"> 6-16位。</small>
<div id="checkPassword2"></div>
</td>
<td></td>
</tr>
<tr>
<td valign="top" align="right"><span class="hot"> * </span>
电子邮件：</td>
<td><input name="email" id="email" size="35"
class="input required email" /><small
class="hint"> 默认邮件回复会发到这个信箱。</small>
<div id="checkEmail"></div>
</td>
<td></td>
</tr>
</tbody>
</table>
</form>

 

 

 

评论

1 楼 GoogleAppEngine 2011-03-16  

http://www.sent998.com/?fromuid=403357 藏妃阁，你懂的...