首页>>表单>>Bootstrap+jquery表单验证(2019-04-28)

Bootstrap+jquery表单验证

本例的email验证没有匹配到数据库查询，本站已经有类似的代码，你可以试试搜索"检测"

Bootstrap+jquery表单验证
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container">  
  2.       <form class="bootstrap-form needs-validation" novalidate>  
  3.         <div class="form-row">  
  4.           <div class="col-md-12 mb-3">  
  5.             <label for="name">Name</label>  
  6.             <input type="text" class="form-control" id="name" name="name" placeholder="Name" autocomplete="off" required>  
  7.             <div class="valid-feedback">  
  8.               Looks good!  
  9.             </div>  
  10.             <div class="invalid-feedback">  
  11.               Looks bad!  
  12.             </div>  
  13.           </div>  
  14.           <div class="col-md-12 mb-3">  
  15.             <label for="email">Email</label>  
  16.             <input type="email" class="form-control" id="email" name="email" placeholder="Email" autocomplete="off" required>  
  17.             <div class="valid-feedback">  
  18.               Looks good!  
  19.             </div>  
  20.             <div class="invalid-feedback">  
  21.               Looks bad!  
  22.             </div>  
  23.           </div>  
  24.           <div class="col-md-12 mb-3">  
  25.             <label for="password">Password</label>  
  26.             <input type="password" class="form-control" id="password" name="password" placeholder="Password" autocomplete="off" required>  
  27.             <div class="valid-feedback">  
  28.               Looks good!  
  29.             </div>  
  30.             <div class="invalid-feedback">  
  31.               Looks bad!  
  32.             </div>  
  33.           </div>  
  34.           <div class="col-md-12 mb-3">  
  35.             <label for="username">Username</label>  
  36.             <div class="input-group">  
  37.               <div class="input-group-prepend">  
  38.                 <span class="input-group-text" id="inputGroupPrepend">@</span>  
  39.               </div>  
  40.               <input type="text" class="form-control" id="username" name="username" placeholder="Username" aria-describedby="inputGroupPrepend" autocomplete="off" required>  
  41.               <div class="valid-feedback">  
  42.                 Looks good!  
  43.               </div>  
  44.               <div class="invalid-feedback">  
  45.                 Looks bad!  
  46.               </div>  
  47.             </div>  
  48.           </div>  
  49.           <div class="col-md-12 mb-3">  
  50.             <label for="textarea">Address</label>  
  51.             <div class="input-group">  
  52.               <div class="input-group-prepend">  
  53.                 <span class="input-group-text" id="inputGroupPrepend">Textarea</span>  
  54.               </div>  
  55.               <textarea class="form-control" id="textarea" name="textarea" placeholder="Textarea" aria-describedby="inputGroupPrepend" autocomplete="off" required></textarea>  
  56.               <div class="valid-feedback">  
  57.                 Looks good!  
  58.               </div>  
  59.               <div class="invalid-feedback">  
  60.                 Looks bad!  
  61.               </div>  
  62.             </div>  
  63.           </div>  
  64.           <div class="col-md-12 mb-3 form-group">  
  65.             <label for="select-one">Example select single</label>  
  66.             <select class="form-control" id="select-one" name="select-one">  
  67.               <option>1</option>  
  68.               <option>2</option>  
  69.               <option>3</option>  
  70.               <option>4</option>  
  71.               <option>5</option>  
  72.             </select>  
  73.             <div class="valid-feedback">  
  74.               Looks good!  
  75.             </div>  
  76.             <div class="invalid-feedback">  
  77.               Looks bad!  
  78.             </div>  
  79.           </div>  
  80.           <div class="col-md-12 mb-3 form-group">  
  81.             <label for="select-multiple">Example select multiple</label>  
  82.             <select multiple class="form-control" id="select-multiple" name="select-multiple">  
  83.               <option selected>1</option>  
  84.               <option>2</option>  
  85.               <option>3</option>  
  86.               <option>4</option>  
  87.               <option>5</option>  
  88.             </select>  
  89.             <div class="valid-feedback">  
  90.               Looks good!  
  91.             </div>  
  92.             <div class="invalid-feedback">  
  93.               Looks bad!  
  94.             </div>  
  95.           </div>  
  96.           <div class="form-group">  
  97.             <div class="form-check">  
  98.               <input class="form-check-input" type="checkbox" id="checkbox" required>  
  99.               <label class="form-check-label" for="checkbox">  
  100.                 Agree to terms and conditions  
  101.               </label>  
  102.               <div class="valid-feedback">  
  103.                 Hmmm! So you agreed.  
  104.               </div>  
  105.               <div class="invalid-feedback">  
  106.                 You must agree before submitting.  
  107.               </div>  
  108.             </div>  
  109.           </div>  
  110.         </div>  
  111.         <button class="btn btn-outline-primary" type="submit">Submit form</button>  
  112.         <button class="btn btn-outline-warning" type="reset">Reset form</button>  
  113.       </form>  
  114.     </div>  

 


原文地址:http://www.freejs.net/article_biaodan_752.html