使用bootstrap validator的remote验证代码经验分享(推荐)

时间:2021-05-25

这里需要说一下,bootstrapvalidator的帮助文档写的比较简单,对于remote验证器的说明更是如此,在经历多方测试之后才明白如何使用这个验证器。

一个典型的ajax验证代码如下:

服务端验证代码(使用spring mvc)如下:

/** 返回String类型的结果* 检查用户名的合法性,如果用户已经存在,返回false,否则返回true(返回json数据,格式为{"valid",true})*/@RequestMapping(value = "/checkNameExistsMethod1", produces = "application/json;charset=UTF-8")public @ResponseBodyString checkNameValidMethod1(@RequestParam String name) {boolean result = true;List<Employee> lstEmployees = employeeService.getAllEmployees();for (Employee employee : lstEmployees) {if (employee.getName().equals(name)) {result = false;break;}}Map<String, Boolean> map = new HashMap<>();map.put("valid", result);ObjectMapper mapper = new ObjectMapper();String resultString = "";try {resultString = mapper.writeValueAsString(map);} catch (JsonProcessingException e) {e.printStackTrace();}return resultString;}

这里需要说明的是bootstrap的remote验证器需要的返回结果一定是json格式的数据 :

{"valid":false} //表示不合法,验证不通过{"valid":true} //表示合法,验证通过

如果返回任何其他的值,页面验证将获取不到验证结果导致无法验证。

附一段完整的远程remote验证的代码加说明:

$(function(){$('#defaultForm').bootstrapValidator({message: 'This value is not valid',feedbackIcons: {valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'},fields: {username: {//验证input项:验证规则message: 'The username is not valid',validators: {notEmpty: {//非空验证:提示消息message: '用户名不能为空'},stringLength: {min: 6,max: 30,message: '用户名长度必须在6到30之间'},threshold : 6 , //有6字符以上才发送ajax请求,(input中输入一个字符,插件会向服务器发送一次,设置限制,6字符以上才开始)remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值,获得一个json数据。例表示正确:{"valid",true} url: 'exist2.do',//验证地址message: '用户已存在',//提示消息delay : 2000,//每输入一个字符,就发ajax请求,服务器压力还是太大,设置2秒发送一次ajax(默认输入一个字符,提交一次,服务器压力太大)type: 'POST'//请求方式/**自定义提交数据,默认值提交当前input value* data: function(validator) {return {password: $('[name="passwordNameAttributeInYourForm"]').val(),whatever: $('[name="whateverNameAttributeInYourForm"]').val()};}*/},regexp: {regexp: /^[a-zA-Z0-9_\.]+$/,message: '用户名由数字字母下划线和.组成'}}},password: {message:'密码无效',validators: {notEmpty: {message: '密码不能为空'},stringLength: {min: 6,max: 30,message: '用户名长度必须在6到30之间'},identical: {//相同field: 'password', //需要进行比较的input name值message: '两次密码不一致'},different: {//不能和用户名相同field: 'username',//需要进行比较的input name值message: '不能和用户名相同'},regexp: {regexp: /^[a-zA-Z0-9_\.]+$/,message: 'The username can only consist of alphabetical, number, dot and underscore'}}},repassword: {message: '密码无效',validators: {notEmpty: {message: '用户名不能为空'},stringLength: {min: 6,max: 30,message: '用户名长度必须在6到30之间'},identical: {//相同field: 'password',message: '两次密码不一致'},different: {//不能和用户名相同field: 'username',message: '不能和用户名相同'},regexp: {//匹配规则regexp: /^[a-zA-Z0-9_\.]+$/,message: 'The username can only consist of alphabetical, number, dot and underscore'}}},email: {validators: {notEmpty: {message: '邮件不能为空'},emailAddress: {message: '请输入正确的邮件地址如:123@qq.com'}}},phone: {message: 'The phone is not valid',validators: {notEmpty: {message: '手机号码不能为空'},stringLength: {min: 11,max: 11,message: '请输入11位手机号码'},regexp: {regexp: /^1[3|5|8]{1}[0-9]{9}$/,message: '请输入正确的手机号码'}}},invite: {message: '邀请码',validators: {notEmpty: {message: '邀请码不能为空'},stringLength: {min: 8,max: 8,message: '请输入正确长度的邀请码'},regexp: {regexp: /^[\w]{8}$/,message: '请输入正确的邀请码(包含数字字母)'}}},}}).on('success.form.bv', function(e) {//点击提交之后// Prevent form submissione.preventDefault();// Get the form instancevar $form = $(e.target);// Get the BootstrapValidator instancevar bv = $form.data('bootstrapValidator');// Use Ajax to submit form data 提交至form标签中的action,result自定义$.post($form.attr('action'), $form.serialize(), function(result) {//do something...});});});

以上所述是小编给大家介绍的使用bootstrap validator的remote验证经验分享(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章