首页>>表单>>表单验证，自定义提示内容(2019-10-28)

表单验证，自定义提示内容

表单验证，自定义提示内容
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="row">  
  2.                 <div class="col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8">  
  3.                     <div class="panel panel-default">  
  4.                         <div class="panel-heading">  
  5.                             <h3 class="panel-title">Registration</h3>  
  6.                         </div>  
  7.                         <div class="panel-body">  
  8.                               
  9.                             <form class="form-horizontal" action="." id="form1">  
  10.                                 <div class="form-group">  
  11.                                     <div class="col-lg-12"><label class="control-label" for="username">Username</label></div>  
  12.                                     <div class="col-lg-12">  
  13.                                         <input type="text" name="username" id="username" class="form-control really-simple required"  
  14.                                                 data-required-message="Your username must be not blank"  
  15.                                                 data-really-simple-message="Please enter a valid username, it should contain only letters and numbers" />  
  16.                                     </div>  
  17.                                 </div>  
  18.                                 <div class="form-group">  
  19.                                     <div class="col-lg-12"><label class="control-label" for="name">Name</label></div>  
  20.                                     <div class="col-lg-12">  
  21.                                         <input type="text" name="name" id="name" class="form-control required"  
  22.                                                 data-required-message="Your name must be not blank" />  
  23.                                     </div>  
  24.                                 </div>  
  25.                                 <div class="form-group">  
  26.                                     <div class="col-lg-12"><label class="control-label" for="password">Password</label></div>  
  27.                                     <div class="col-lg-12">  
  28.                                         <input type="password" name="password" id="password" class="form-control password required"  
  29.                                                 data-required-message="Your password must be not blank"  
  30.                                                 data-password-message="Please enter a valid password, it should contain at least 6 characters with at least 1 number and special character" />  
  31.                                     </div>  
  32.                                 </div>  
  33.                                 <div class="form-group">  
  34.                                     <div class="col-lg-12"><label class="control-label" for="repassword">Confirm Password</label></div>  
  35.                                     <div class="col-lg-12">  
  36.                                         <input type="password" name="repassword" id="repassword" class="form-control repassword required"  
  37.                                                 data-required-message="Confirm password must be not blank"  
  38.                                                 data-repassword-message="Confirm password is not matched" />  
  39.                                     </div>  
  40.                                 </div>  
  41.                                 <div class="form-group">  
  42.                                     <div class="col-lg-12"><label class="control-label" for="email">Email</label></div>  
  43.                                     <div class="col-lg-12">  
  44.                                         <input type="text" name="email" id="email" class="form-control email required"  
  45.                                                 data-required-message="Your email must be not blank"  
  46.                                                 data-email-message="Your email must be like someone@somewhere.com" />  
  47.                                     </div>  
  48.                                 </div>  
  49.                                 <div class="form-group">  
  50.                                     <div class="col-lg-12"><label class="control-label" for="age">Age</label></div>  
  51.                                     <div class="col-lg-12">  
  52.                                         <input type="text" name="age" id="age" class="form-control number required"  
  53.                                                 data-required-message="Your age must be not blank"  
  54.                                                 data-number-message="Your age must be digits" />  
  55.                                     </div>  
  56.                                 </div>  
  57.                                 <div class="form-group">  
  58.                                     <div class="col-lg-12"><label class="control-label" for="dob">DOB</label></div>  
  59.                                     <div class="col-lg-12">  
  60.                                         <input type="text" name="dob" id="dob" class="form-control date required"  
  61.                                                 data-required-message="Your DOB must be not blank"  
  62.                                                 data-date-message="Your DOB must be like 14/02/2000" />  
  63.                                     </div>  
  64.                                 </div>  
  65.       
  66.                                 <hr />  
  67.       
  68.                                 <div class="form-group">  
  69.                                     <div class="col-lg-12"><label class="control-label" for="website">Website link</label></div>  
  70.                                     <div class="col-lg-12">  
  71.                                         <input type="text" name="website" id="website" class="form-control url required"  
  72.                                                 data-required-message="Your website must be not blank"  
  73.                                                 data-url-message="Your website must be like www.somewhere.com" />  
  74.                                     </div>  
  75.                                 </div>  
  76.                                 <div class="form-group">  
  77.                                     <div class="col-lg-12"><label class="control-label" for="websiteName">Website name</label></div>  
  78.                                     <div class="col-lg-12">  
  79.                                         <input type="text" name="websiteName" id="websiteName" class="form-control simple required"  
  80.                                                 data-required-message="Your website name must be not blank"  
  81.                                                 data-simple-message="Your website name must contains only letters, numbers and only 1 underscore or dash or space between letters and numbers" />  
  82.                                     </div>  
  83.                                 </div>  
  84.                                 <div class="form-group">  
  85.                                     <div class="col-lg-12"><label class="control-label" for="websiteColor">Website main color</label></div>  
  86.                                     <div class="col-lg-12">  
  87.                                         <input type="text" name="websiteColor" id="websiteColor" class="form-control regex required"  
  88.                                                 data-regex="^#?([a-f0-9]{6}|[a-f0-9]{3})$"  
  89.                                                 data-required-message="Your website main color must be not blank"  
  90.                                                 data-regex-message="Your website main color must be like #000 or #000000" />  
  91.                                     </div>  
  92.                                 </div>  
  93.                                   
  94.                                 <hr />  
  95.                                   
  96.                                 <div class="form-action">  
  97.                                 </div>  
  98.                             </form>  
  99.                         </div>  
  100.                     </div>  
  101.                 </div>  
  102.             </div>  

 


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