bootstrap的常用的表单验证 bootstrapValidator.js
bootstrap的常用的表单验证 bootstrapValidator.js
今天我给大家详情一个bootstrap插件简化开发。就是bootstrapValidator.js。
先看效果
2.jpg
首先引用jquery bootstrap bootstrapValidator(css ，js文件都需要引用)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>html
<div class="main" style="width: 45%; margin: 50px auto;"> <h2>bootstrap客户注册 表单验证</h2> <form id="updateform"> <div class="form-group"> <label for="loginname" class="control-label">客户名:</label> <input type="text" class="form-control" id="loginname" name="loginname"> </div> <div class="form-group"> <label for="email" class="control-label">Email:</label> <input type="text" class="form-control" id="email" name="email"> </div> <div class="form-group"> <label for="password" class="control-label">密码:</label> <input type="password" class="form-control" id="password" name="password"> </div> <div class="form-group"> <label for="repassword" class="control-label">确认密码:</label> <input type="password" class="form-control" id="repassword" name="repassword"> </div> <div class="form-group"> <label for="phone" class="control-label">手机号码:</label> <input type="text" class="form-control" id="phone" name="phone"> </div> <div class="form-group"> <label for="address" class="control-label">收货地址:</label> <textarea class="form-control" id="address" name="address"></textarea> </div> <div class="text-right"> <span id="returnMessage" class="glyphicon"> </span> <button type="submit" id="submitBtn" class="btn btn-primary">注册</button> <button type="reset" class="btn btn-default">重置</button> </div> </form> </div>重点来了
var form = $('#updateform'); $(document).ready(function() { form.bootstrapValidator({ message: '输入值不合法', feedbackIcons: { //提醒图标 valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { loginname: { message: '客户名不合法', validators: { notEmpty: { message: '客户名不能为空' }, stringLength: { min: 2, max: 20, message: '请输入2到20个字符' }, regexp: { regexp: /^[a-zA-Z0-9_\. \u4e00-\u9fa5 ]+$/, message: '客户名只能由字母、数字、点、下划线和汉字组成 ' } } }, email: { validators: { notEmpty: { message: 'email不能为空' }, emailAddress: { message: '请输入正确的邮件地址如：123@qq.com' } } }, password: { message: '以字母开头，长度在6-12之间，必需包含数字和特殊字符。', validators: { notEmpty: { message: '密码不能为空' }, stringLength: { min: 6, max: 12, message: '请输入6到12个字符' }, identical: { //相同 field: 'password', message: '两次密码不一致' }, different: { //不能和客户名相同 field: 'username', message: '不能和客户名相同' }, regexp: { regexp: /^[a-zA-Z][a-zA-Z0-9_]{6,12}$/, message: '密码以字母开头 由字母、数字、下划线和汉字组成 ' } } }, repassword: { message: '必须以字母开头，长度在6-12之间', validators: { notEmpty: { message: '密码不能为空' }, stringLength: { min: 6, max: 12, message: '密码长度必需在6到12之间' }, identical: { //相同 field: 'password', message: '两次密码不一致' }, different: { //不能和客户名相同 field: 'username', message: '不能和客户名相同' }, regexp: { //匹配规则 regexp: /^[a-zA-Z][a-zA-Z0-9_]{6,12}$/, message: '密码以字母开头 由字母、数字、下划线和汉字组成' } } }, phone: { validators: { notEmpty: { message: '手机号码不能为空' }, regexp: { regexp: "^([0-9]{11})?$", message: '手机号码格式错误' } } }, address: { validators: { notEmpty: { message: '地址不能为空' }, stringLength: { min: 8, max: 60, message: '请输入5到60个字符' } } } } }); }); 下面是整体代码 是不是很贴心呢
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必需*放在最前面，任何其余内容都*必需*跟随其后！ --> <title>表单验证</title> <!-- Bootstrap core CSS --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="main" style="width: 45%; margin: 50px auto;"> <h2>客户信息 表单验证</h2> <form id="updateform"> <div class="form-group"> <label for="loginname" class="control-label">客户名:</label> <input type="text" class="form-control" id="loginname" name="loginname"> </div> <div class="form-group"> <label for="email" class="control-label">Email:</label> <input type="text" class="form-control" id="email" name="email"> </div> <div class="form-group"> <label for="password" class="control-label">密码:</label> <input type="password" class="form-control" id="password" name="password"> </div> <div class="form-group"> <label for="repassword" class="control-label">确认密码:</label> <input type="password" class="form-control" id="repassword" name="repassword"> </div> <div class="form-group"> <label for="phone" class="control-label">手机号码:</label> <input type="text" class="form-control" id="phone" name="phone"> </div> <div class="form-group"> <label for="address" class="control-label">收货地址:</label> <textarea class="form-control" id="address" name="address"></textarea> </div> <div class="text-right"> <span id="returnMessage" class="glyphicon"> </span> <!-- <button id="submitBtn" type="button" class="btn btn-primary">提交</button> --> <button type="submit" id="submitBtn" class="btn btn-primary">注册</button> <button type="reset" class="btn btn-default">重置</button> </div> </form> </div> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script> <script type='text/javascript'> var form = $('#updateform'); $(document).ready(function() { form.bootstrapValidator({ message: '输入值不合法', feedbackIcons: { //提醒图标 valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { loginname: { message: '客户名不合法', validators: { notEmpty: { message: '客户名不能为空' }, stringLength: { min: 2, max: 20, message: '请输入2到20个字符' }, regexp: { regexp: /^[a-zA-Z0-9_\. \u4e00-\u9fa5 ]+$/, message: '客户名只能由字母、数字、点、下划线和汉字组成 ' } } }, email: { validators: { notEmpty: { message: 'email不能为空' }, emailAddress: { message: '请输入正确的邮件地址如：123@qq.com' } } }, password: { message: '以字母开头，长度在6-12之间，必需包含数字和特殊字符。', validators: { notEmpty: { message: '密码不能为空' }, stringLength: { min: 6, max: 12, message: '请输入6到12个字符' }, identical: { //相同 field: 'password', message: '两次密码不一致' }, different: { //不能和客户名相同 field: 'username', message: '不能和客户名相同' }, regexp: { regexp: /^[a-zA-Z][a-zA-Z0-9_]{6,12}$/, message: '密码以字母开头 由字母、数字、下划线和汉字组成 ' } } }, repassword: { message: '必须以字母开头，长度在6-12之间', validators: { notEmpty: { message: '密码不能为空' }, stringLength: { min: 6, max: 12, message: '密码长度必需在6到12之间' }, identical: { //相同 field: 'password', message: '两次密码不一致' }, different: { //不能和客户名相同 field: 'username', message: '不能和客户名相同' }, regexp: { //匹配规则 regexp: /^[a-zA-Z][a-zA-Z0-9_]{6,12}$/, message: '密码以字母开头 由字母、数字、下划线和汉字组成' } } }, phone: { validators: { notEmpty: { message: '手机号码不能为空' }, regexp: { regexp: "^([0-9]{11})?$", message: '手机号码格式错误' } } }, address: { validators: { notEmpty: { message: '地址不能为空' }, stringLength: { min: 8, max: 60, message: '请输入5到60个字符' } } } } }); }); </script> </body></html>啦啦啦 结束喽 这是我在简书的第一篇文章 请多多包涵！！！
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » bootstrap的常用的表单验证 bootstrapValidator.js
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » bootstrap的常用的表单验证 bootstrapValidator.js
