分类
商品
- 商品
- 店铺
- 资讯
今天我给大家详情一个bootstrap插件简化开发。就是bootstrapValidator.js。
先看效果
2.jpg
<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><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>
送码官方微信
手机访问领取大礼包