首页>>表单>>ManyaJS 表单验证实例(2018-11-30)

ManyaJS 表单验证实例

ManyaJS 表单验证实例
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form class="inline-form" id="sampleForm" action="#">  
  2.                             <div class="row">  
  3.                                 <div class="col-sm-6">  
  4.                                     <div class="form-group">  
  5.                                         <label class="control-label">First Name</label>  
  6.                                         <input type="text" class="form-control" name="first name" val-type="text" val-error="Your name is required" regex-error="Your name can contain only charactors" regex="name" placeholder="John">  
  7.                                         <span class="help-block"></span>  
  8.                                     </div>  
  9.                                 </div>  
  10.                                 <div class="col-sm-6">  
  11.                                     <div class="form-group">  
  12.                                         <label class="control-label">Last Name</label>  
  13.                                         <input type="text" name="last name" class="form-control" id="txtLastName" regex="name" placeholder="Doe">  
  14.                                         <span class="help-block"></span>  
  15.                                     </div>  
  16.                                 </div>  
  17.                             </div>  
  18.                             <div class="row">  
  19.                                 <div class="col-sm-6">  
  20.                                     <div class="form-group">  
  21.                                         <label class="control-label">Email Address</label>  
  22.                                         <input type="email" class="form-control" name="email address" val-type="text" regex="email" value="" suggestion="email" placeholder="sample@domain.com">  
  23.                                         <div class="suggestion-box">  
  24.                                             <span class="suggestion"></span>  
  25.                                             <span class="suggested-action"></span>  
  26.                                         </div>  
  27.                                         <span class="help-block"></span>  
  28.                                     </div>  
  29.                                 </div>  
  30.                                 <div class="col-sm-6">  
  31.                                     <div class="form-group">  
  32.                                         <label class="control-label">Mobile </label>  
  33.                                         <input type="text" class="form-control" name="mobile" regex="mobile" placeholder="9000000000">  
  34.                                         <span class="help-block"></span>  
  35.                                     </div>  
  36.                                 </div>  
  37.                             </div>  
  38.                             <div class="row">  
  39.                                 <div class="col-sm-6">  
  40.                                     <div class="form-group">  
  41.                                         <label class="control-label">Country</label>  
  42.                                         <select class="form-control" val-type="select" name="country" id="ddlCountry">  
  43.                                             <option>Select</option>  
  44.                                             <option>China</option>  
  45.                                             <option>Russia</option>  
  46.                                             <option>UK</option>  
  47.                                             <option>USA</option>  
  48.                                               
  49.                                               
  50.                                               
  51.                                         </select>  
  52.                                         <span class="help-block"></span>  
  53.                                     </div>  
  54.                                 </div>  
  55.                                 <div class="col-sm-6">  
  56.                                     <div class="form-group">  
  57.                                         <label class="control-label">Profile Image</label>  
  58.                                         <input type="file" val-type="file" regex="image" name="profile image" id="fileProfielImage">  
  59.                                         <span class="help-block"></span>  
  60.                                     </div>  
  61.                                 </div>  
  62.                             </div>  
  63.   
  64.                             <div class="row">  
  65.                                 <div class="col-sm-6">  
  66.                                     <div class="form-group">  
  67.                                         <label class="control-label">DOB</label>  
  68.                                         <input type="date" max="2000-03-15" min="1960-03-14" val-type="text" regex="dob" class="form-control" id="txtDOB" placeholder="Date of Birth" name="dob">  
  69.                                         <span class="help-block"></span>  
  70.                                     </div>  
  71.                                 </div>  
  72.                                 <div class="col-sm-6">  
  73.                                     <div class="form-group">  
  74.                                         <label class="control-label">Gender</label>  
  75.                                         <div>  
  76.                                             <label for="rdbMale">  
  77.                                                 <input type="radio" name="gender" id="rdbMale" with-parent="yes" val-type="radio">Male  
  78.                                             </label>  
  79.                                             <label for="rdbFemale">  
  80.                                                 <input type="radio" name="gender" id="rdbFemale" with-parent="yes" val-type="radio">Female  
  81.                                             </label>  
  82.                                             <label for="rdbTransgender">  
  83.                                                 <input type="radio" name="gender" id="rdbTransgender" with-parent="yes" val-type="radio">Transgender  
  84.                                             </label>  
  85.                                             <span class="help-block"></span>  
  86.                                         </div>  
  87.                                     </div>  
  88.                                 </div>  
  89.                             </div>  
  90.                             <div class="row">  
  91.                                 <div class="col-sm-12">  
  92.                                     <div class="form-group">  
  93.                                         <label class="control-label">Your Bio</label>  
  94.                                         <textarea class="form-control col-sm-8" name="bio" placeholder="Tell us about yourself"></textarea>  
  95.                                     </div>  
  96.                                 </div>  
  97.                             </div>  
  98.                             <div class="row">  
  99.                                 <div class="col-sm-12">  
  100.                                     <div class="form-group">  
  101.                                         <label for="txtAcceptTandC">  
  102.                                             <input type="checkbox" id="txtAcceptTandC" name="Term and Condiation" val-type="check" with-parent="yes"> Accept Term and Conditions  
  103.                                         </label>  
  104.                                         <span class="help-block"></span>  
  105.                                     </div>  
  106.                                 </div>  
  107.                             </div>  
  108.                             <div class="row">  
  109.                                 <div class="col-sm-12">  
  110.                                     <div class="form-group">  
  111.                                         <button type="submit" id="btnSubmit" class="btn btn-default">Submit</button>  
  112.                                     </div>  
  113.                                 </div>  
  114.                             </div>  
  115.                         </form>  

 


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