php - jquery 验证不适用于特殊字符限制

标签 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 field is not select then displaying the error and when error messages are displayed 然后一些字段正在改变它们的状态。 我希望所有错误消息都应显示在其字段的下方。 谢谢。

最佳答案 

$.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>

关于php - jquery 验证不适用于特殊字符限制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54455016/

上一篇：jquery - CSS 菜单项呈现在底部，然后向右移动

下一篇：html - 如何在移动设备上堆叠两个 div，但在桌面上并排排列？

相关文章：

php - CakePHP LDAP/MySQL 混合模型

php - 尽管有 function()，_function() 的含义是什么

javascript - 如何在页面滚动上为图像设置动画？

html - 将元素的大小限制为给定大小的倍数

html - Flexbox、换行和拉伸(stretch)

php - 如何嵌套PHP代码块

php - 从序列化数组 MySQL 中检索特定值

javascript - Chrome 扩展 : How to get/detect click events on any page or any where. 就像 Google Dictionary Plugin 一样？

javascript - .keyup() 只工作一次，为什么？

javascript - 如何在javascript中将字符串方程式转换为数字？

©2024 IT工具网  联系我们