足球游戏_中国足彩网¥体育资讯$

jQuery验证插件validation使用指南
来源:易贤网 阅读:1025 次 日期:2015-04-24 11:34:46
温馨提示:易贤网小编为您整理了“jQuery验证插件validation使用指南”,方便广大网友查阅!

jquery.validation.js在前端验证中使用起来非常方便,提供的功能基本上能满足大部分验证需求,下面我们就来仔细研究下这款jQuery插件的具体使用方法。

在网站开发过程中,有时我们需要验证用户输入的信息是否符合我们的要求,所以我们会对用户提交的数据进行验证。验证分两次进行,一次是在客户端,一次是在服务端。客户端的验证可以提升用户的体验。

jquery验证插件有很多,实现的功能也基本相同。本文介绍的只是jquery验证插件中的一种jquery.validate

jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性。

1.jquery.validate插件功能

简单实现客户端信息验证,过滤不符合要求的信息

2.jquery.validate官方地址

官方地址:,有详细的插件使用说明

官方demo:

3.jquery.validate使用方法

1.引用js

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.validate.js"></script>

2.css样式,可自定义,简单的只需要添加error样式,也可使用官方demo中的样式。

.error{

color:red;

margin-left:8px;

}

3.js代码

$(document).ready(function() {

// validate signup form on keyup and submit

var validator = $("#signupform").validate({

rules: {

firstname: "required",

username: {

required: true,

minlength: 2

},

password: {

required: true,

minlength: 5

},

password_confirm: {

required: true,

minlength: 5,

equalTo: "#password"

},

email: {

required: true,

email: true,

},

dateformat: "required",

terms: "required"

},

messages: {

firstname: "姓名不能为空",

username: {

required: "用户名不能为空",

minlength: jQuery.format("用户名只少由 {0} 字符组成")

},

password: {

required: "密码不能为空",

minlength: jQuery.format("密码只少由 {0} 字符组成")

},

password_confirm: {

required: "确认密码不能为空",

minlength: jQuery.format("确认密码只少由 {0} 字符组成"),

equalTo: "秘密与确认密码不一致"

},

email: {

required: "邮箱不能为空",

email: "邮箱格式不正确"

},

dateformat: "请选择性别",

terms: " "

},

// the errorPlacement has to take the table layout into account

errorPlacement: function(error, element) {

if ( element.is(":radio") )

error.appendTo( element.parent().next().next());

else if ( element.is(":checkbox") )

error.appendTo ( element.next());

else

error.appendTo( element.parent().next());

},

// specifying a submitHandler prevents the default submit, good for the demo

submitHandler: function() {

alert("submitted!");

},

// set this class to error-labels to indicate valid fields

success: function(label) {

// set as text for IE

label.html(" ").addClass("checked");

},

highlight: function(element, errorClass) {

$(element).parent().next().find("." + errorClass).removeClass("checked");

}

});

});

以上的代码只使用了插件提供的属性和方法。也可以自定义验证方法。如

$.validator.addMethod("checkUserName", function(value) {

//value为验证的值,对应于元素id

//方法代码

}, '用户名格式不正确');

使用自定义方法也非常简单,只需要 元素id:”checkUserName”

4.使用的html

<form id="signupform" autocomplete="off" method="get" action="">

<table>

<tr>

<td class="label"><label id="lfirstname" for="firstname">姓名</label></td>

<td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>

<td class="status"></td>

</tr>

<tr>

<td class="label"><label id="lusername" for="username">用户名</label></td>

<td class="field"><input id="username" name="username" type="text" value="" maxlength="50" /></td>

<td class="status"></td>

</tr>

<tr>

<td class="label"><label id="lpassword" for="password">密码</label></td>

<td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td>

<td class="status"></td>

</tr>

<tr>

<td class="label"><label id="lpassword_confirm" for="password_confirm">确认密码</label></td>

<td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td>

<td class="status"></td>

</tr>

<tr>

<td class="label"><label id="lemail" for="email">邮箱</label></td>

<td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td>

<td class="status"></td>

</tr>

<tr>

<td class="label"><label>性别</label></td>

<td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;">

<table>

<tbody>

<tr>

<td style="padding-right: 5px;">

<input id="sex_men" name="dateformat" type="radio" value="0" />

<label id="lbl_sex_men" for="dateformat_eu">男</label>

</td>

<td style="padding-left: 5px;">

<input id="sex_women" name="dateformat" type="radio" value="1" />

<label id="lbl_sex_women" for="dateformat_am">女</label>

</td>

<td>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

<td class="label"> </td>

<td class="field" colspan="2">

<div id="termswrap">

<input id="terms" type="checkbox" name="terms" />

<label id="lterms" for="terms">以阅读并同意网站条款.</label>

</div> <!-- /termswrap -->

</td>

</tr>

<tr>

<td class="label"></td>

<td class="field" colspan="2">

<input id="signupsubmit" name="signup" type="submit" value="注册" />

</td>

</tr>

</table>

</form>

中国足彩网信息请查看IT技术专栏

中国足彩网信息请查看脚本栏目
易贤网手机网站地址:jQuery验证插件validation使用指南
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标