简历模板免费网站,js做网站登录,平面设计需要用到的软件,软件网站排行榜bootstrap#xff1a;能够增加兼容性的强大框架. 因为项目需要数据验证#xff0c;看bootstrapValidator 还不错#xff0c;就上手一直#xff0c;完美兼容#xff0c;话不多说。 需要引用css#xff1a; bootstrap.min.css bootstrapValidator.min.css js: jquery-1.10.…bootstrap能够增加兼容性的强大框架. 因为项目需要数据验证看bootstrapValidator 还不错就上手一直完美兼容话不多说。 需要引用css bootstrap.min.css bootstrapValidator.min.css js: jquery-1.10.2.min.js bootstrap.min.js bootstrapValidator.min.js 下载实例 以上这些都是必须的。 先上个简单的例子,只要导入相应的文件可以直接运行 View Code 这是最基本的例子直接复制到本地并且导入需要的css和js文件JS中usernamepassword等键值名和input标签中name属性值对应运行就能够进行非空长度验证完全不需要管css样式。 效果图如下 当然以上都是插件写好的规则如果想自己加匹配规则怎么办呢 如下只要在input相对应的键值中加入一个regexp:{}键值对在上面的js基础上修改 username: {/*键名和input name值对应*/message: The username is not valid,validators: {notEmpty: {/*非空提示*/message: 用户名不能为空},regexp: {/* 只需加此键值对包含正则表达式和提示 */regexp: /^[a-zA-Z0-9_\.]$/,message: 只能是数字和字母_.},stringLength: {/*长度提示*/min: 6,max: 30,message: 用户名长度必须在6到30之间}/*最后一个没有逗号*/}}, 效果如下 至此只要运行和看了例子就能进行大部分的验证了是不是很简单只要写相应的键值对即可再也自己什么都写了。下面进一步的使用进行用户的注册 需求 实时验证用户名是否存在密码不能和用户名相同两次密码需要相同提交之后需要验证返回值 html代码直接替换上例子中的form即可 form iddefaultForm roleform classform-signin actionregisterAccount.domethodposth2 classform-signin-heading请输入注册信息/h2div classform-grouplabel forusername用户名/labelinput classform-controltypetext nameusername idusername //divdiv classform-grouplabel forpassword密码/labelinput classform-controltypepassword namepassword idpassword//divdiv classform-grouplabel forrepassword确认密码/labelinput classform-controltypepassword namerepassword idrepassword //divdiv classform-grouplabel forphone手机号码/labelinput classform-controltypetext namephone idphone //divdiv classform-grouplabel foremailemail:/labelinput classform-controltypeemail nameemail idemail //divdiv classform-grouplabel forinvite邀请码/labelinput classform-controltypetext nameinvite idinvite/divdiv classform-groupbutton classbtn btn-lg btn-primary btn-block typesubmit确认注册/buttona classbtn btn-lg btn-primary btn-block href../返回首页/a/div/form js代码(直接替换例子中的JS) $(function(){/* 文档加载执行一个函数*/$(#defaultForm).bootstrapValidator({message: This value is not valid,feedbackIcons: {/*input状态样式图片*/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: $([namepasswordNameAttributeInYourForm]).val(),whatever: $([namewhateverNameAttributeInYourForm]).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: 请输入正确的邮件地址如123qq.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标签中的actionresult自定义$.post($form.attr(action), $form.serialize(), function(result) {
//do something...
});});
}); 效果图 异常 Uncaught RangeError: Maximum call stack size exceedede 没有加classform-group转载于:https://www.cnblogs.com/lufangtao/p/5936514.html
