表单验证插件 bootstrapValidator
程序员文章站
2022-05-10 18:59:02
...
自己使用后,记录一下
引入:除了bootstrap.css与bootstrap.min.js外,还引入了2个
bootstrapValidator.css bootstrapValidator.js
<form id="defaultForm" method="post" class="form-horizontal" action=""> <div class="form-group"> <label class="col-lg-3 control-label">用户名</label> <div class="col-lg-5"> <input id="username" type="text" class="form-control" name="username" placeholder="请输入用户名"/> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">登录密码</label> <div class="col-lg-5"> <input id="userpwd" type="password" class="form-control" name="password" placeholder="请输入密码"/> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">确认密码</label> <div class="col-lg-5"> <input id="r_userpwd" type="password" class="form-control" name="confirmPassword" placeholder="请再次输入密码"/> </div> </div> ...
$('#defaultForm').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: {//根据验证结果显示的各种图标 valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, username: { message: '用户名无效', validators: { notEmpty: { message: '用户名是必需的,不能是空的' }, stringLength: { min: 4, max: 30, message: '用户名必须大于4,小于30个字符长' }, regexp: { // regexp: /^[a-zA-Z0-9_\.]+$/, regexp: /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/, message: '用户名只能由中文、字母、数字、和下划线组成,且不能以下划线开头与结尾' }, remote: { url: ttp_url + '', message: '用户名已存在或不可用', delay : 2000 }, different: { field: 'password', message: '用户名和密码不能彼此相同' } } }, password: { validators: { notEmpty: { message: '密码是必需的,不能是空的' }, stringLength: { min: 6, max: 30, message: '密码必须大于6,小于30个字符长' }, identical: { field: 'confirmPassword', message: '密码和确认密码是不一样的' }, different: { field: 'username', message: '密码不能与用户名相同' } } }, confirmPassword: { validators: { notEmpty: { message: '确认密码是必需的,不能为空' }, identical: { field: 'password', message: '密码和确认密码是不一样的' }, different: { field: 'username', message: '密码不能与用户名相同' } } } } });
以上只是部分内容,最后效果为
上一篇: 简单的表单验证