这是我参与8月更文挑战的第12天,活动详情查看:8月更文挑战
jQuery验证及限制
jQuery验证及限制
绑定键盘监听事件
$(document).on("keypress", ".txt-valid-len", function (e)
{
return (this.value.length < $(this).attr("maxlength"));
});
输入框设置
-
然后我们只需要在input中添加txt-valid-len这个class属性。并且加入maxlength属性指定长度就可以了。
<input type="text" id="user_name" name="name" class="form-control txt-valid-len" maxlength="11" />
- 上面的代码的意思就是这个输入框长度限制在11位,超过11位就不显示了。如果想在超过11位进行提示。可以扩展上面的监听事件。
jquery表单提交验证
- 在开发中我们前台经常需要在与后台交互前进行相关数据的验证。这样可以减少服务端的压力。下面我们来看看jquery给我们提供的表单验证的方法。
引入脚本文件
jquery.min.js
jquery.validate.js
-
这两个js在官网的jQuery中都是包含的,直接下载引入就行了。
-
有了这两个js我们还需要页面上的form表单。表单就是我们平常的表单。
<form id="myform" method="post" action="#">
<p>
<label for="myname">用户名:</label>
<!-- id和name最好同时写上 -->
<input id="myname" name="myname" />
</p>
<p>
<label for="age">年龄:</label>
<input id="age" name="age" />
</p>
<p>
<label for="email">E-Mail:</label>
<input id="email" name="email" />
</p>
<p>
<label for="password">登陆密码:</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">确认密码:</label>
<input name="confirm_password" type="password" />
</p>
<p>
<input class="submit" type="submit" value="立即注册" />
</p>
</form>
自定义js实现表单验证(利用jQuery提供内置方法)
- 首先我们通过jQuery提供的选择器找到我们需要验证的表单
$("#myform").validate();
- 就这样我们就完成了表单验证。当然啦,到这里只是架子打好了。下面我们开始在validate中填写我们的验证规则了。
$("#myform").validate({
debug: true, //调试模式取消submit的默认提交功能
//errorClass: "label.error", //默认为错误的样式类为:error
focusInvalid: false, //当为false时,验证无效时,没有焦点响应
onkeyup: false,
submitHandler: function(form){ //表单提交句柄,为一回调函数,带一个参数:form
alert("提交表单");
form.submit(); //提交表单
},
rules:{
myname:{
required:function(element){
if( $("#age").val() < 13){
return true;
}
else{
return false;
}
}
},
email:{
required:true,
email:true
},
password:{
required:true,
rangelength:[3,10]
},
confirm_password:{
equalTo:"input[name=password]"
}
},
messages:{
myname:{
required:"必填"
},
email:{
required:"<span style='color:red;'>只允许输入整数。</span>",
email:"E-Mail格式不正确"
},
password:{
required: "不能为空",
rangelength: $.validator.format("密码最小长度:{0}, 最大长度:{1}。")
},
confirm_password:{
equalTo:"两次密码输入不一致"
}
}
});
- 其中的rules就是我们验证规则内容。其中的myname,email…是我们form需要验证的控件的name属性值(并不是ID属性值),还有我们的提示信息可以做的花哨一点加入样式
<span style='color:red;'>只允许输入整数。</span>
- 至于这些验证规则我们可以在jquery-validate.js中找到。里面messages属性的提示信息我们都是可以用来做验证的.
动态决定验证规则
- 上面的myname的required的验证是根据id=age的input框的值得变化决定的,就是说你输入的年龄小于13岁myname是需要验证的。大于则反之。如果你想做的像更美化我们可以在年龄input中绑定一个失去焦点的时间(blur),在输入完年龄我们就立马去验证myname的input框的规则,通过调用
$("#myname").valid();
- 就会去按照我们的规则去验证myname这个字段的input的值。
通过远程进行验证
前台
- 对上面的进行如下的修改,其中remote就是我们的远程请求,该请求返回的true,则验证通过,false反之。
$("#myform").validate({
rules: {
email: {
required: true,
email: true,
remote: {
type:"post",
dataType: "json",
contentType : "application/json",
url:"/adminManage/email.bsh"
}
}
}
});
后台
- 这的注意的是remote这里的请求格式有些要求,这个url返回的数据必须是json格式的。但是后台只能返回string或者boolean类型的数据。如果返回的是string内容的json,那么string是true则验证通过,若果不是true则验证提示就是你返回的string内容。如果是boolean,是true则验证通过,false验证失败。
@RequestMapping("/email.bsh")
@ResponseBody
public Object email(HttpServletRequest request,HttpServletResponse response)
{
return "已经存在";
}
- 前台提示已经存在,会覆盖前台默认的提示内容
@RequestMapping("/email.bsh")
@ResponseBody
public Object email(HttpServletRequest request,HttpServletResponse response)
{
return "true";
}
- 验证通过
@RequestMapping("/email.bsh")
@ResponseBody
public Object email(HttpServletRequest request,HttpServletResponse response)
{
return true;
}
- 验证通过
@RequestMapping("/email.bsh")
@ResponseBody
public Object email(HttpServletRequest request,HttpServletResponse response)
{
return false;
}
- 验证失败,前台将提示默认的信息
验证提示信息的显示位置
- 在上面一节我们详细介绍了验证的规则及提示实现。那么提示信息的位置有时候也是很重要的,我们控制的好的话界面会很美观的。
var validator = $("#myform").validate({
debug: true, //调试模式取消submit的默认提交功能
errorClass: "haha",//默认为错误的样式类为:error
focusInvalid: false,
onkeyup: false,
submitHandler: function(form){ //表单提交句柄,为一回调函数,带一个参数:form
alert("提交表单");
//form.submit(); 提交表单
},
rules: { //定义验证规则,其中属性名为表单的name属性
username: {
required: true,
minlength: 2,
remote: "uservalid.jsp" //传说当中的ajax验证
},
firstpwd: {
required: true,
//minlength: 6
rangelength: [6,8]
},
secondpwd: {
required: true,
equalTo: "#password"
},
sex: {
required: true
},
age: {
required: true,
range: [0,120]
},
email: {
required: true,
email: true
},
purl: {
required: true,
url: true
},
afile: {
required: true,
accept: "xls,doc,rar,zip"
}
},
messages: { //自定义验证消息
username: {
required: "用户名是必需的!",
minlength: $.format("用户名至少要{0}个字符!"),
remote: $.format("{0}已经被占用")
},
firstpwd: {
required: "密码是必需的!",
rangelength: $.format("密码要在{0}-{1}个字符之间!")
},
secondpwd: {
required: "密码验证是必需的!",
equalTo: "密码验证需要与密码一致"
},
sex: {
required: "性别是必需的"
},
age: {
required: "年龄是必需的",
range: "年龄必须介于{0}-{1}之间"
},
email: {
required: "邮箱是必需的!",
email: "请输入正确的邮箱地址(例如 myemail@163.com)"
},
purl: {
required: "个人主页是必需的",
url: "请输入正确的url格式,如 http://www.domainname.com"
},
afile: {
required: "附件是必需的!",
accept: "只接收xls,doc,rar,zip文件"
}
},
errorPlacement: function(error, element) { //验证消息放置的地方
error.appendTo( element.parent("td").next("td") );
},
highlight: function(element, errorClass) { //针对验证的表单设置高亮
$(element).addClass(errorClass);
},
success: function(label) {
label.addClass("valid").text("Ok!")
}
/*,
errorContainer: "#error_con", //验证消息集中放置的容器
errorLabelContainer: "#error_con ul", //存放消息无序列表的容器
wrapper: "li", //将验证消息用无序列表包围
validClass: "valid", //通过验证的样式类
errorElement: "em", //验证标签的名称,默认为:label
success: "valid" //验证通过的样式类
*/
});
重构规则
不论什么时候,当你的表单中的多个字段含有相同的验证规则及验证消息,重构规则可以减少很多重复。使用 addMethod 和 addClassRules 将非常有效果。
假使已经重构了如下规则:
// alias required to cRequired with new message
$.validator.addMethod("cRequired", $.validator.methods.required,
"Customer name required");
// alias minlength, too
$.validator.addMethod("cMinlength", $.validator.methods.minlength,
// leverage parameter replacement for minlength, {0} gets replaced with 2
$.format("Customer name must have at least {0} characters"));
// combine them both, including the parameter for minlength
$.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 });
<input name="customer1" class="customer" />
<input name="customer2" class="customer" />
<input name="customer3" class="customer" />
adMethod
addMethod( name, method, [message] )
返回:undefined
参数 name 类型:String
要添加的方法名,用于标识和引用,必须是一个有效的javascript标识符。
参数 method 类型:Callback 方法的实现部分,返回true如果表单元素通过验证。
参数 message(Optional) 类型:String, Function 该方法的默认验证消息。可以用 jQuery.validator.format(value) 方法创建。如果未定义该参数,则使用本地已存在的验证消息,另外,必须为指定的表单元素定义验证消息。
说明:添加一个用户自定义的验证方法。它由方法名(必须是一个合法的javascript标识符)、基于javascript的函数及默认的验证消息组成。
addClassRules( name, rules ) 返回:undefined
参数 name 类型:String 要添加的样式规则名。
参数 rules 类型:Options 规则选项。
说明:添加一个复合的样式验证方法。对于将多个联合使用的规则重构进单个样式中非常有用。
今天的文章jquery验证大全分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/20846.html