您的位置：首页 > Web前端 > JQuery

Jquery验证插件Validation的运用

2016-11-21 19:48 232 查看

1.引入jqueryJS文件、validation插件的JS文件

<script src="jquery-validation-1.15.1/lib/jquery-1.9.1.js"></script>
<script src="jquery-validation-1.15.1/lib/jquery.validate.js"></script>

2.Demo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Validate验证</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="jquery-validation-1.15.1/lib/jquery-1.9.1.js"></script>
<script src="jquery-validation-1.15.1/lib/jquery.validate.js"></script>
<script type="text/javascript">
$(function(){
var validate = $("#myform").validate({
//debug: true, //调试模式取消submit的默认提交功能
//errorClass: "label.error", //默认为错误的样式类为：error
//focusInvalid: false, //当为false时，验证无效时，没有焦点响应
//onkeyup: false,
submnitHandler: function(){ //表单提交句柄,为一回调函数，带一个参数：form
//。。。。。。。这里写验证成功后执行的方法
alert("提交表单");
//form.submit(); //提交表单
},

rules:{
myname:{
required:true
}/*,
email:{
required:true,
email:true
},
password:{
required:true,
rangelength:[3,10]
},
confirm_password:{
equalTo:"#password"
} */
},
messages:{
myname:{
required:"必填"
}/*,
email:{
required:"必填",
email:"E-Mail格式不正确"
},
password:{
required: "不能为空",
rangelength: $.format("密码最小长度:{0}, 最大长度:{1}。")
},
confirm_password:{
equalTo:"两次密码输入不一致"
} */
}
});

});
</script>
</head>

<body>
<form id="myform" >
<p>
<label >用户名：</label>
<input name="myname" />
</p>

<p>
<input type="submit" value="立即注册" />
</p>
</form>
</body>
</html>

在验证checkbox和radio控件时，验证信息不会出现在最后的控件文本后面，而是直接跟在第一个控件的后面，不符合我们的要求。
解决办法是在validate({})追加以下代码：

errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo ( element.parent() );
else if ( element.is(":checkbox") )
error.appendTo ( element.parent() );
//else if ( element.is("input[name=captcha]") )
// error.appendTo ( element.parent() );
else
error.insertAfter(element);
}
// 重置表单
$().ready(function() {
var validator = $("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit();
}
});
$("#reset").click(function() {
validator.resetForm();
});

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航