php - jquery验证不适用于特殊字符限制
问题描述
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 & Barbuda</option>
<option value="HM">Heard & Mcdonald Islands</option>
<option value="LA">Lao People'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 & Barbuda</option>
<option value="HM">Heard & Mcdonald Islands</option>
<option value="LA">Lao People'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.当未选择要求字段时显示错误,当显示错误消息时,某些字段正在更改其状态。我希望所有错误消息都应显示在其字段的下方。谢谢你。
解决方案
$.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 & Barbuda</option>
<option value="HM">Heard & Mcdonald Islands</option>
<option value="LA">Lao People'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 & Barbuda</option>
<option value="HM">Heard & Mcdonald Islands</option>
<option value="LA">Lao People'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>
推荐阅读
- javascript - 尝试解析 json 时看到未定义
- python - 使用 ransac 时如何获得更多内点?
- visual-studio-code - 缺少(找不到)工作区的文件夹路径配置设置
- node.js - 无法访问在 connection.query 函数中声明的变量
- python-3.x - “为什么加载值和 CSV 文件值显示不同?”
- html - 在导航链接之间放置分隔线的正确方法是什么?
- java - 如何将日期从 mm/dd/yyyy 转换为 mm dd, yyyy
- mysql - 如果mysql关闭/失败,如何修复“未知变量'nnodb_buffer_pool_size”?
- sql - 我怎样才能将这些查询连接在一起?
- .net - 在 spa 和 api rest .net core 之间共享 cookie