BootstrapValidator校验使用方法和校验规则总结 |
您所在的位置：网站首页 › js校验数字时e怎么处理 › BootstrapValidator校验使用方法和校验规则总结 |
|
一.首先引入BootstrapValidator插件
BootstrapValidator插件需要jQuery和Bootstrap 3
引入js和css文件
二.添加验证规则
1.使用HTML添加简单验证
如果想对某一个字段添加验证规则，需要 包裹，input标签必须有name值，此值为验证匹配的字段。 Email address 2.使用js添加验证简述 bootstrapValidator 使用方法。想查看更多可以访问http://bootstrapvalidator.votintsev.ru/getting-started/ 查看文档 $('form').bootstrapValidator({ // 默认的提示消息 message: 'This value is not valid', // 表单框里右侧的icon feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, submitHandler: function (validator, form, submitButton) { // 表单提交成功时会调用此方法 // validator: 表单验证实例对象 // form jq对象 指定表单对象 // submitButton jq对象 指定提交按钮的对象 }, fields: { username: { message: '用户名验证失败', validators: { notEmpty: { message: '用户名不能为空' }, stringLength: { //长度限制 min: 6, max: 18, message: '用户名长度必须在6到18位之间' }, regexp: { //正则表达式 regexp: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含大写、小写、数字和下划线' }, different: { //比较 field: 'username', //需要进行比较的input name值 message: '密码不能与用户名相同' }, identical: { //比较是否相同 field: 'password', //需要进行比较的input name值 message: '两次密码不一致' }, remote: { // ajax校验，获得一个json数据（{'valid': true or false}） url: 'user.php', //验证地址 message: '用户已存在', //提示信息 type: 'POST', //请求方式 data: function(validator){ //自定义提交数据，默认为当前input name值 return { act: 'is_registered', username: $("input[name='username']").val() }; } } } }, email: { validators: { notEmpty: { message: '邮箱地址不能为空' }, emailAddress: { message: '邮箱地址格式有误' } } } } }); 三.在validators中一些验证规则的总结1.判断字段是否为空 notEmpty: { message: '用户名必填不能为空' },2.字段长度判断 stringLength: { min: 6, max: 30, message: '用户名长度不能小于6位或超过30位' },3.通过正则表达式进行验证 regexp: { regexp: /^[A-Z\s]+$/i, message: '名字只能由字母字符和空格组成。' }4.大小写验证 stringCase: { message: '姓氏必须只包含大写字符。', case: 'upper'//其他值或不填表示只能小写字符 },5.两个字段不相同的判断 different: { field: 'password', message: '用户名和密码不能相同。' }6.email验证 emailAddress: { message: 'The input is not a valid email address' }7.日期格式验证 date: { format: 'YYYY/MM/DD', message: '日期无效' }8.纯数字验证 digits: { message: '该值只能包含数字。' }9.ajax验证 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'//请求方式 },10.复选框验证 choice: { min: 2, max: 4, message: '请选择2-4项' }11.密码确认 identical: { field: 'confirmPassword', message: 'The password and its confirm are not the same' },12.判断输入数字是否符合大于18小于100 greaterThan: { value: 18 }, lessThan: { value: 100 }13.uri验证 uri: {} 四、callback自定义校验规则 schoolName: { validators: { notEmpty: { message: '请选择分支机构' }, callback: { message: '请选择分支机构', callback: function(value, validator) { //这里可以自定义value的判断规则 if (value == 0) {//"请选择" //错误的参数值 return false; } else { //合格的参数值 return true; } } } } }, |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |