jQuery验证不适用于特殊字符限制

时间：2019-01-31 07:01:11

标签： php jquery html css

1。我正在使用jquery验证，当用户输入错误的输入时，它将显示错误。 在需要任何输入时，它可以很好地工作。 但是问题是当只需要输入整数值然后接受 特殊字符。 我想如果有人在我声明电话号码或任何数字字段的地方输入特殊字符，则只能接受数字而不是字符。 2.第二个问题是在检查验证时，因此显示了一些错误消息。虽然错误消息正在显示，所以某些输入字段将其状态更改为另一侧，但我不知道为什么CSS无法对其进行处理。 这是我的代码。

  $.validator.addMethod('decimal', function(value, element) {
  return this.optional(element) || /^((\d+(\\.\d{0,2})?)|((\d*(\.\d{1,2}))))$/.test(value);
}, "Please enter a correct number, format 0.00");
  $().ready(function () {
  // validate signup form on keyup and submit
  $("#signup").on('submit', function(e) {
    e.preventDefault();
    $('#log').text('Form is valid? ' + $(this).valid().toString());
  });

  $("#signup").validate({
    rules: {
      FirstName:{
        required:true,
        minlength: 3,
        maxlength:50
      }, 
      LastName:{
        required: true,
        minlength: 3,
        maxlength:50
      }, 
      Address1:{
        minlength: 3,
        maxlength:100
      }, 
      Address2:{
        minlength: 3,
        maxlength:100
      }, 
      upCountry:{
        required:true
      }, 
      pickupCity:{
        required:true
      },
      PIN:{
        minlength:6,
        maxlength:6
      },
      PhoneMobile :{
        minlength:10,
        maxlength:12
      },
      PhoneResidence :{
        minlength:11,
        maxlength:15
      },
      password :{
        required: true
      },
      Email :{
        required: true,
        maxlength:100
      },
      AdhaarNumber :{
        required: true,
        minlength:12,
        maxlength:12
      },
      SkypeID :{
        minlength:10,
        maxlength:50
      },
      AgencyName :{
        minlength:3,
        maxlength:100
      },
      AgencyAddress1 :{
        minlength:3,
        maxlength:100
      },
      AgencyAddress2 :{
        minlength:3,
        maxlength:100
      },
      AgencyCity :{
        required: true
      },
      AgencyState :{
        required: true
      },
      AgencyCountry :{
        required: true
      },
      AgencyPIN :{
        minlength:6,
        maxlength:6
      },
      AgencyPhoneOffice :{
        minlength:12,
        maxlength:15
      },
      AgencyFAX :{
        minlength:12,
        maxlength:15
      },
      AgencyBusinessType :{
        required: true
      },
      AgencyBusinessYear :{
        required: true
      },
      AgencyBookingVolume :{
        minlength:1,
        maxlength:5
      },
      SecuritizationModeType :{
        required: true
      },
      AgencyPAN :{
        minlength:10,
        maxlength:12
      },
      TDSExemption :{
        required: true,
        decimal: true
      },
      TDSPercentageEx :{
        required: true,
        decimal: true
      },
      References :{
        minlength:5,
        maxlength:150
      },
      Consolidators :{
        minlength:5,
        maxlength:150
      },
      Remarks :{
        minlength:5,
        maxlength:150
      }

      
    },
    messages: {
      FirstName:{
        required: "Please Enter Ur First Name",
        minlength: 'please enter atleast three character',
        maxlength: 'Please do not enter more than 50 words' 
      },
      LastName:{
        required: "Please enter your last name",
        minlength: 'please enter atleast three character',
        maxlength: 'Please do not enter more than 50 words' 
      },
      Address1:{
        minlength: 'please enter atleast three character',
        maxlength: 'Please do not enter more than 50 words'
      },
      Address2:{
        minlength: 'please enter atleast three character',
        maxlength: 'Please do not enter more than 50 words'
      },
      upCountry:{
        required: "Please select the country"
      },
      pickupCity:{
        required: "Please select the city"
      }, 
      PIN:{
        minlength:'Please enter atleast 6 digits',
        maxlength:'Please do not enter more than 6 digits'
      },
      PhoneMobile :{
        minlength:'Please enter atleast 10 digits',
        maxlength:'Please do not enter more than 12 digits'
      }
    },
    submitHandler: function (form) { // for demo
      alert('valid form');
      return false;
    }
  });


});
label { width: 200px; float: left; margin: 0 130px 0 0;}
    span { display: block; margin: 0 0 5px; font-size: 0.8em; font-weight: bold; color: grey; }
    input { width: 300px; border: 1px solid #000; padding: 10px; }
    select { width: 321px; border: 1px solid #000; padding: 9px; }
    .error{color: red;}
    .headC{
				text-align: center;
				font-weight: bold;
				padding: 15px 0px 15px 0px;
				font-size: 27px;
				background: #ff8f35;
				color: #ffff;
				
				background-repeat: no-repeat;
  				background-size: 5px 100px;

			}
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js" type="text/javascript"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/additional-methods.js" type="text/javascript"></script>
<form name="signup" id="signup" action="SignUpServlet" method="post">
   <div style="padding: 5%;">
      <div class="headC" >Register Here</div>
   </div>
   <div style="padding-left: 25%; padding-top: 1%;">
      <!-- first panel start from here -->
      <div>
         <label for="company">
            <span>Owner's First Name</span>
            <div class="input">
               <input name="FirstName" type="text" placeholder="First Name"id="FirstName" tabindex="1"
                  style="color:Gray;"/>
            </div>
            <span>Owner's Last Name</span>
            <div class="input">
               <input name="LastName" type="text" placeholder="Last Name" id="LastName" tabindex="2" 
                  style="color:Gray;" />
            </div>
            <span>Residential Address</span>
            <div class="input">
               <input name="Address1" type="text" placeholder="Address1" id="Address1" tabindex="3"/>
            </div>
            <br>
            <div class="input">
               <input name="Address2" type="text" placeholder="Address2" id="Address2" 
                  tabindex="4"/>
            </div>
            <span>Country</span>
            <div class="input">
               <!-- <?php $countries = get_datafromTable('countries');//  print_r($countries); ?> -->
               <select name="Country"  id="upCountry" class="input" required="required" tabindex="5">
                  <option value="">------------------------Select Country-------------------------</option>
                  <!-- <? foreach($countries as $countriesNames){ ?> -->
                  <option value="<?php echo $countriesNames['id'];?>"><?php echo $countriesNames['name']; ?></option>
                  <!-- <? } ?> -->
               </select>
            </div>
            <span>City</span>
            <div class="input">
               <select class="input"  name="City" id="pickupCity" required="required" tabindex="6">
                  <option value="">First Select Country</option>
               </select>
            </div>
            <span>Pin</span>
            <div class="input">
               <input name="PIN" type="text" id="PIN" tabindex="7"/>
            </div>
         </label>
      </div>
      <!--     first panel form second section start from here -->
      <span>Agency Name</span>
      <div class="input">
         <input name="AgencyName" type="text" id="AgencyName" tabindex="15"/>
      </div>
      <span>Agency Address:</span>
      <div class="input">
         <input name="AgencyAddress1" type="text" id="AgencyAddress1" tabindex="16"/>
      </div>
      <br>
      <div class="input">
         <input name="AgencyAddress2" type="text" id="AgencyAddress2" tabindex="17"/>
      </div>
      <span>City</span>
      <div class="input">
         <select class="input"  name="AgencyCity" id="AgencyCity" class="form-control" required="required" tabindex="18">
            <option value="">---------------------------Select City---------------------------</option>
            <option value="60">Vishakhapatnam</option>
            <option value="61">Warangal</option>
            <option value="112">YAMUNA NAGAR</option>
            <option value="Other">Other</option>
         </select>
      </div>
      <span>State/Province</span>
      <div class="input">
         <select class="input" name="AgencyState" id="AgencyState" tabindex="19">
            <option value="">--------------------------Select State--------------------------</option>
            <option value="Other">Other</option>
         </select>
      </div>
      <span>Country</span>
      <div class="input">
         <select class="input" name="AgencyCountry" id="AgencyCountry" tabindex="20">
            <option value="">------------------------Select Country-------------------------</option>
            <option value="AQ">Antarctica</option>
            <option value="AG">Antigua &amp; Barbuda</option>
            <option value="HM">Heard &amp; Mcdonald Islands</option>
            <option value="LA">Lao People&#39;s Democratic Republic</option>
         </select>
      </div>
      <span>Pin</span>
      <div class="input">
         <input name="AgencyPIN" type="text" id="AgencyPIN" tabindex="21"/>
      </div>
      <span>Phone Number(Off)</span>
      <div class="input">
         <input name="AgencyPhoneOffice" type="text" id="AgencyPhoneOffice"tabindex="22"/>
      </div>
      <span>Agency Name</span>
      <div class="input">
         <input name="AgencyName" type="text" id="AgencyName" tabindex="15"/>
      </div>
      <span>Agency Address:</span>
      <div class="input">
         <input name="AgencyAddress1" type="text" id="AgencyAddress1" tabindex="16"/>
      </div>
      <br>
      <div class="input">
         <input name="AgencyAddress2" type="text" id="AgencyAddress2" tabindex="17"/>
      </div>
      <span>City</span>
      <div class="input">
         <select class="input"  name="AgencyCity" id="AgencyCity" class="form-control" required="required" tabindex="18">
            <option value="">---------------------------Select City---------------------------</option>
            <option value="60">Vishakhapatnam</option>
            <option value="61">Warangal</option>
            <option value="112">YAMUNA NAGAR</option>
            <option value="Other">Other</option>
         </select>
      </div>
      <span>State/Province</span>
      <div class="input">
         <select class="input" name="AgencyState" id="AgencyState" tabindex="19">
            <option value="">--------------------------Select State--------------------------</option>
            <option value="Other">Other</option>
         </select>
      </div>
      <span>Country</span>
      <div class="input">
         <select class="input" name="AgencyCountry" id="AgencyCountry" tabindex="20">
            <option value="">------------------------Select Country-------------------------</option>
            <option value="AQ">Antarctica</option>
            <option value="AG">Antigua &amp; Barbuda</option>
            <option value="HM">Heard &amp; Mcdonald Islands</option>
            <option value="LA">Lao People&#39;s Democratic Republic</option>
         </select>
      </div>
      <span>Pin</span>
      <div class="input">
         <input name="AgencyPIN" type="text" id="AgencyPIN" tabindex="21"/>
      </div>
      </label>  
   </div>
   </div>
   <div style="padding-top: 20%; padding-left: 40%;">
      <input type="submit" id="submit" value="submit">
   </div>
</form>

如您所见。 1.我想每当我声明电话号码或提交的号码时，都应在该字段中仅输入数字而不是特殊字符。 2.while require字段未选中则显示错误，并且在显示错误消息时某些字段正在更改其状态。 我希望所有错误消息都应显示在其字段的下面。 谢谢。

1 个答案:

答案 0 :(得分：1)

$.validator.addMethod('decimal', function(value, element) {
      return this.optional(element) || /^((\d+(\\.\d{0,2})?)|((\d*(\.\d{1,2}))))$/.test(value);
    }, "Please enter a correct number, format 0.00");
      $().ready(function () {
      // validate signup form on keyup and submit
      $("#signup").on('submit', function(e) {
        e.preventDefault();
        $('#log').text('Form is valid? ' + $(this).valid().toString());
      });

      $("#signup").validate({
        rules: {
          FirstName:{
            required:true,
            minlength: 3,
            maxlength:50
          }, 
          LastName:{
            required: true,
            minlength: 3,
            maxlength:50
          }, 
          Address1:{
            minlength: 3,
            maxlength:100
          }, 
          Address2:{
            minlength: 3,
            maxlength:100
          }, 
          upCountry:{
            required:true
          }, 
          pickupCity:{
            required:true
          },
          PIN:{
            minlength:6,
            maxlength:6
          },
          PhoneMobile :{
            number: true,
            minlength:10,
            maxlength:12,
          },
                          
          PhoneResidence :{
            minlength:11,
            maxlength:15
          },
          password :{
            required: true
          },
          Email :{
            required: true,
            maxlength:100
          },
          AdhaarNumber :{
            required: true,
            minlength:12,
            maxlength:12
          },
          SkypeID :{
            minlength:10,
            maxlength:50
          },
          AgencyName :{
            minlength:3,
            maxlength:100
          },
          AgencyAddress1 :{
            minlength:3,
            maxlength:100
          },
          AgencyAddress2 :{
            minlength:3,
            maxlength:100
          },
          AgencyCity :{
            required: true
          },
          AgencyState :{
            required: true
          },
          AgencyCountry :{
            required: true
          },
          AgencyPIN :{
            minlength:6,
            maxlength:6
          },
          AgencyPhoneOffice :{
            minlength:12,
            maxlength:15
          },
          AgencyFAX :{
            minlength:12,
            maxlength:15
          },
          AgencyBusinessType :{
            required: true
          },
          AgencyBusinessYear :{
            required: true
          },
          AgencyBookingVolume :{
            minlength:1,
            maxlength:5
          },
          SecuritizationModeType :{
            required: true
          },
          AgencyPAN :{
            minlength:10,
            maxlength:12
          },
          TDSExemption :{
            required: true,
            decimal: true
          },
          TDSPercentageEx :{
            required: true,
            decimal: true
          },
          References :{
            minlength:5,
            maxlength:150
          },
          Consolidators :{
            minlength:5,
            maxlength:150
          },
          Remarks :{
            minlength:5,
            maxlength:150
          }

          
        },
        messages: {
          FirstName:{
            required: "Please Enter Ur First Name",
            minlength: 'please enter atleast three character',
            maxlength: 'Please do not enter more than 50 words' 
          },
          LastName:{
            required: "Please enter your last name",
            minlength: 'please enter atleast three character',
            maxlength: 'Please do not enter more than 50 words' 
          },
          Address1:{
            minlength: 'please enter atleast three character',
            maxlength: 'Please do not enter more than 50 words'
          },
          Address2:{
            minlength: 'please enter atleast three character',
            maxlength: 'Please do not enter more than 50 words'
          },
          upCountry:{
            required: "Please select the country"
          },
          pickupCity:{
            required: "Please select the city"
          }, 
          PIN:{
            minlength:'Please enter atleast 6 digits',
            maxlength:'Please do not enter more than 6 digits'
          },
          PhoneMobile :{
            minlength:'Please enter atleast 10 digits',
            maxlength:'Please do not enter more than 12 digits'
          }
        },
        submitHandler: function (form) { // for demo
          alert('valid form');
          return false;
        }
      });


    });
.error { color: red; margin: 0; padding: 0; float: inherit}
    label { width: 200px; float: left; margin: 0 130px 0 0;}
        span { display: block; margin: 0 0 5px; font-size: 0.8em; font-weight: bold; color: grey; }
        input { width: 300px; border: 1px solid #000; padding: 10px; }
        select { width: 321px; border: 1px solid #000; padding: 9px; }
        .error{color: red;}
        .headC{
    				text-align: center;
    				font-weight: bold;
    				padding: 15px 0px 15px 0px;
    				font-size: 27px;
    				background: #ff8f35;
    				color: #ffff;
    				
    				background-repeat: no-repeat;
      				background-size: 5px 100px;

    			}
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js" type="text/javascript"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/additional-methods.js" type="text/javascript"></script>
    <form name="signup" id="signup" action="SignUpServlet" method="post">
       <div style="padding: 5%;">
          <div class="headC" >Register Here</div>
       </div>
       <div style="padding-left: 25%; padding-top: 1%;">
          <!-- first panel start from here -->
          <div>
             <label for="company">
                <span>Owner's First Name</span>
                <div class="input">
                   <input name="FirstName" type="text" placeholder="First Name"id="FirstName" tabindex="1"
                      style="color:Gray;"/>
                </div>
                <span>Owner's Last Name</span>
                <div class="input">
                   <input name="LastName" type="text" placeholder="Last Name" id="LastName" tabindex="2" 
                      style="color:Gray;" />
                </div>
                <span>Residential Address</span>
                <div class="input">
                   <input name="Address1" type="text" placeholder="Address1" id="Address1" tabindex="3"/>
                </div>
                <br>
                <div class="input">
                   <input name="Address2" type="text" placeholder="Address2" id="Address2" 
                      tabindex="4"/>
                </div>
                <span>Country</span>
                <div class="input">
                   <!-- <?php $countries = get_datafromTable('countries');//  print_r($countries); ?> -->
                   <select name="Country"  id="upCountry" class="input" required="required" tabindex="5">
                      <option value="">------------------------Select Country-------------------------</option>
                      <!-- <? foreach($countries as $countriesNames){ ?> -->
                      <option value="<?php echo $countriesNames['id'];?>"><?php echo $countriesNames['name']; ?></option>
                      <!-- <? } ?> -->
                   </select>
                </div>
                <span>City</span>
                <div class="input">
                   <select class="input"  name="City" id="pickupCity" required="required" tabindex="6">
                      <option value="">First Select Country</option>
                   </select>
                </div>
                <span>Pin</span>
                <div class="input">
                   <input name="PIN" type="text" id="PIN" tabindex="7"/>
                </div>
             </label>
          </div>
          <!--     first panel form second section start from here -->
          <span>Agency Name</span>
          <div class="input">
             <input name="AgencyName" type="text" id="AgencyName" tabindex="15"/>
          </div>
          <span>Agency Address:</span>
          <div class="input">
             <input name="AgencyAddress1" type="text" id="AgencyAddress1" tabindex="16"/>
          </div>
          <br>
          <div class="input">
             <input name="AgencyAddress2" type="text" id="AgencyAddress2" tabindex="17"/>
          </div>
          <span>City</span>
          <div class="input">
             <select class="input"  name="AgencyCity" id="AgencyCity" class="form-control" required="required" tabindex="18">
                <option value="">---------------------------Select City---------------------------</option>
                <option value="60">Vishakhapatnam</option>
                <option value="61">Warangal</option>
                <option value="112">YAMUNA NAGAR</option>
                <option value="Other">Other</option>
             </select>
          </div>
          <span>State/Province</span>
          <div class="input">
             <select class="input" name="AgencyState" id="AgencyState" tabindex="19">
                <option value="">--------------------------Select State--------------------------</option>
                <option value="Other">Other</option>
             </select>
          </div>
          <span>Country</span>
          <div class="input">
             <select class="input" name="AgencyCountry" id="AgencyCountry" tabindex="20">
                <option value="">------------------------Select Country-------------------------</option>
                <option value="AQ">Antarctica</option>
                <option value="AG">Antigua &amp; Barbuda</option>
                <option value="HM">Heard &amp; Mcdonald Islands</option>
                <option value="LA">Lao People&#39;s Democratic Republic</option>
             </select>
          </div>
          <span>Pin</span>
          <div class="input">
             <input name="AgencyPIN" type="text" id="AgencyPIN" tabindex="21"/>
          </div>
          <span>Phone Number(Off)</span>
          <div class="input">
             <input name="AgencyPhoneOffice" type="number" id="AgencyPhoneOffice"tabindex="22"/>
          </div>
          <span>Agency Name</span>
          <div class="input">
             <input name="AgencyName" type="text" id="AgencyName" tabindex="15"/>
          </div>
          <span>Agency Address:</span>
          <div class="input">
             <input name="AgencyAddress1" type="text" id="AgencyAddress1" tabindex="16"/>
          </div>
          <br>
          <div class="input">
             <input name="AgencyAddress2" type="text" id="AgencyAddress2" tabindex="17"/>
          </div>
          <span>City</span>
          <div class="input">
             <select class="input"  name="AgencyCity" id="AgencyCity" class="form-control" required="required" tabindex="18">
                <option value="">---------------------------Select City---------------------------</option>
                <option value="60">Vishakhapatnam</option>
                <option value="61">Warangal</option>
                <option value="112">YAMUNA NAGAR</option>
                <option value="Other">Other</option>
             </select>
          </div>
          <span>State/Province</span>
          <div class="input">
             <select class="input" name="AgencyState" id="AgencyState" tabindex="19">
                <option value="">--------------------------Select State--------------------------</option>
                <option value="Other">Other</option>
             </select>
          </div>
          <span>Country</span>
          <div class="input">
             <select class="input" name="AgencyCountry" id="AgencyCountry" tabindex="20">
                <option value="">------------------------Select Country-------------------------</option>
                <option value="AQ">Antarctica</option>
                <option value="AG">Antigua &amp; Barbuda</option>
                <option value="HM">Heard &amp; Mcdonald Islands</option>
                <option value="LA">Lao People&#39;s Democratic Republic</option>
             </select>
          </div>
          <span>Pin</span>
          <div class="input">
             <input name="AgencyPIN" type="text" id="AgencyPIN" tabindex="21"/>
          </div>
          </label>  
       </div>
       </div>
       <div style="padding-top: 20%; padding-left: 40%;">
          <input type="submit" id="submit" value="submit">
       </div>
    </form>

相关问题
最新问题