1. 技术文章
  2. 邓_ 表单验证

邓_ 表单验证

由 雨燕双飞 提交于 2019-12-30 00:31:57
  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>邓</title>
  <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
  <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
   
  <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
  </head>
  <body>
  <div class="container">
  <div class="row">
  <!-- form: -->
  <section>
  <div class="page-header">
  <h1>Bootstrap Validate 标题</h1>
  </div>
   
  <div class="col-lg-8 col-lg-offset-2">
  <form id="defaultForm" method="post" action="target.php" class="form-horizontal">
  <fieldset>
  <legend>账号验证 + 选择验证①：</legend>
  <!-- 账号验证 -->
  <div class="form-group">
  <label class="col-lg-3 control-label">账号</label>
  <div class="col-lg-5">
  <input type="text" class="form-control" name="username" />
  </div>
  </div>
  <!-- 选择验证 -->
  <div class="form-group">
  <label class="col-lg-3 control-label">国家</label>
  <div class="col-lg-5">
  <select class="form-control" name="country">
  <option value="">-- 请选择一项 --</option>
  <option value="fr">France</option>
  <option value="de">Germany</option>
  <option value="it">Italy</option>
  <option value="jp">Japan</option>
  <option value="ru">Russia</option>
  <option value="gb">United Kingdom</option>
  <option value="us">United State</option>
  </select>
  </div>
  </div>
  <!-- 勾选 √ 验证 -->
  <div class="form-group">
  <div class="col-lg-5 col-lg-offset-3">
  <div class="checkbox">
  <input type="checkbox" name="acceptTerms" />
  √是否接受本公司协议
  </div>
  </div>
  </div>
  </fieldset>
   
  <fieldset>
  <legend>验证规则②：</legend>
  <!-- 邮箱格式验证 -->
  <div class="form-group">
  <label class="col-lg-3 control-label">Email 邮箱</label>
  <div class="col-lg-5">
  <input type="text" class="form-control" name="email" />
  </div>
  </div>
  <!-- 网址验证 -->
  <div class="form-group">
  <label class="col-lg-3 control-label">网址链接</label>
  <div class="col-lg-5">
  <input type="text" class="form-control" name="website" placeholder="http://" />
  </div>
  </div>
  <!-- 手机号 -->
  <div class="form-group">
  <label class="col-lg-3 control-label">手机号</label>
  <div class="col-lg-5">
  <input type="text" class="form-control" name="phoneNumber" />
  </div>
  </div>
  <!-- 颜色格式 验证 -->
  <div class="form-group">
  <label class="col-lg-3 control-label">颜色</label>
  <div class="col-lg-3">
  <input type="text" class="form-control" name="color" />
  </div>
  </div>
  <!-- 邮政编码 验证 -->
  <div class="form-group">
  <label class="col-lg-3 control-label">US zip code邮政编码</label>
  <div class="col-lg-3">
  <input type="text" class="form-control" name="zipCode" />
  </div>
  </div>
  </fieldset>
   
  <fieldset>
  <legend>密码验证③：</legend>
  <!-- 密码 验证 -->
  <div class="form-group">
  <label class="col-lg-3 control-label">密码</label>
  <div class="col-lg-5">
  <input type="password" class="form-control" name="password" />
  </div>
  </div>
  <!-- 密码一致 验证 -->
  <div class="form-group">
  <label class="col-lg-3 control-label">确认密码</label>
  <div class="col-lg-5">
  <input type="password" class="form-control" name="confirmPassword" />
  </div>
  </div>
  </fieldset>
   
  <fieldset>
  <legend>其他验证④：</legend>
  <!-- 年龄 验证 -->
  <div class="form-group">
  <label class="col-lg-3 control-label">年龄</label>
  <div class="col-lg-3">
  <input type="text" class="form-control" name="ages" />
  </div>
  </div>
  </fieldset>
   
  <div class="form-group">
  <div class="col-lg-9 col-lg-offset-3">
  <button type="submit" class="btn btn-primary">Submit</button>
  </div>
  </div>
  </form>
  </div>
  </section>
  <!-- :form -->
  </div>
  </div>
   
  <script type="text/javascript">
  $(document).ready(function() {
  $('#defaultForm').bootstrapValidator({
  fields: {
  // 账号验证
  // username: { //字段名称：name
  // validators: { //验证规则如下：
  // notEmpty: { //非空验证
  // message: '请输入username2'
  // },
  // stringLength: { //字符串长度验证
  // min: 3,
  // max: 10,
  // message: '请输入3~10位之间的字符'
  // },
  // regexp: { //输入的类型验证
  // // regexp: /^[a-zA-Z0-9_\.]+$/,
  // regexp: /^[0-9_\.]+$/,
  // message: '只能输入数字'
  // }
  // }
  // },
   
  //是否选择一项：
  // country: {
  // validators: { //验证规则：
  // notEmpty: { //非空验证
  // message: '请选择一项'
  // }
  // }
  // },
   
  //是否勾选 √：
  // acceptTerms: {
  // validators: {
  // notEmpty: {
  // message: '此项必填'
  // }
  // }
  // },
   
  //邮箱 格式验证：
  // email: {
  // validators: {
  // notEmpty: {
  // message: '此项必填'
  // },
  // emailAddress: {
  // message: '请输入正确的邮箱格式'
  // }
  // }
  // },
   
  //网站地址 验证：
  // website: {
  // validators: {
  // uri: {
  // message: '请输入正确的URL地址eg：http://www.baidu.com'
  // }
  // }
  // },
   
   
  //手机号 验证：
  // phoneNumber: {
  // validators: {
  // digits: {
  // message: '请输入正确的手机号'
  // }
  // }
  // },
   
  //颜色格式
  // color: {
  // validators: {
  // hexColor: {
  // message: '请输入正确的颜色eg:#9bf'
  // }
  // }
  // },
   
  //邮编格式
  // zipCode: {
  // validators: {
  // zipCode: {
  // country: 'US',
  // message: '输入的邮政编码'
  // }
  // }
  // },
   
  //密码验证
  // password: {
  // validators: {
  // notEmpty: {
  // message: '此项必填'
  // },
  // identical: {
  // field: 'confirmPassword', //字段名name
  // message: '两次密码输入的不一致1'
  // }
  // }
  // },
   
   
  //是否输入的一致：
  // confirmPassword: {
  // validators: {
  // notEmpty: {
  // message: '此项必填'
  // },
  // identical: {
  // field: 'password',
  // message: '两次密码输入的不一致2'
  // }
  // }
  // },
   
   
   
  //年龄 验证：
  ages: {
  validators: {
  lessThan: {
  value: 100,
  inclusive: true,
  message: '不能大于100岁'
  },
  greaterThan: {
  value: 10,
  inclusive: false,
  message: '不能小于10岁'
  }
  }
  }
  //结束验证
   
  }
  });
  });
  </script>
  </body>
  </html>
   
标签
表单验证
input
form
html表单
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!