bootstrapValidator表单验证插件学习

网友投稿 203 2023-06-21


bootstrapValidator表单验证插件学习

本文实例为大家分享了bootstrapValidator表单验证的具体代码,供大家参考,具体内容如下

1.页面引入css、js

2.页面表单

3.js初始化验证

//验证表单

var validatorForm = {

//验证规则

validatorReuls:function(){

$("#detailForm").bootstrapValidator({

feedbackIcons: {

valid: 'glyphicon glyphicon-ok',

invalid: 'glyphicon glyphicon-remove',

validating: 'glyphicon glyphicon-refresh'

},

fields: {

userName:{

validators: {

notEmpty: {

message: '用户名不能为空'

},

remote: {////ajax验证。服务器端返回的 result:{"valid",true or false} 向服务发送当前input name值,获得一个json数据。例表示正确:{"valid",true}

url: contextPath+"/sysUser/username",

type:"GET",

data: function(validator) {

var x_={

userName: validator.getFieldElements('userName').val()

};

return x_;

},

message: '用户名已注册,请重新输入'

}

}

},

email: {

validators: {

notEmpty: {

message: '邮箱不能为空'

},

regexp: {//正则表达式

regexp: Regex.email,

message: '邮箱地址格式不正确'

}

}

}

,userPassword: {

validators: {

notEmpty: {

message: '密码不能为空'

},

regexp: {

regexp: Regex.password_6_18,

message: '密码只能输入6-18个字母、数字、下划线 '

}

}

}

}

});

},

//验证表单

validate: function(formId){

$('#'+formId).data('bootstrapValidator').validate();

},

//验证表单是否通过验证

isValid : function(formId){

return $('#'+formId).data('bootstrapValidator').isValid()

},

//清空表单验证

clearValidate : function(formId){

$('#'+formId).bootstrapValidator('resetForm');

}

}

4.最后呈现的效果

bootstrapValidator官网:bootstapValidator


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:bootstrap表格分页实例讲解
下一篇:Java List转换成String数组几种实现方式详解
相关文章

 发表评论

暂时没有评论,来抢沙发吧~