[英]JavaScript validation for white space
我正在用JavaScript進行客戶端驗證。 我可以對必填字段和電話號碼字段進行驗證,但是除了電子郵件字段之外,所有其他字段都接受空格,以便驗證通過並創建新的數據行。 如何使用JavaScript在我的代碼中包含空白驗證?
JavaScript:
function form_validate(){
var error = 0;
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
$('#form input[type=text]').each(function(n,element){
$(this).removeClass('warning');
if ($(element).val()=='') {
$("#warning td").text("All fields are mandatory.");
$(this).addClass('warning');
$("#warning").show();
error++;
}else if($(element).attr('name')=='email'){
if (!emailReg.test($(element).val())){
$("#warning td").text("Enter a valid email address.");
$(this).addClass('warning');
$("#warning").show();
error++;
}
}else if(($(element).attr('name')=='phone' || $(element).attr('name')=='mobile') && error==0){
if (isNaN($(element).val())){
$("#warning td").text("Enter valid phone number.");
$(this).addClass('warning');
$("#warning").show();
error++;
}
}
});
if(error){
return false;
}else{
return true;
}
}
的HTML
<table width="100%">
<tr>
<td style="width:100px;">First name:</td><td><input type="text" name="first_name" id="first_name" maxlength="20"/></td>
</tr>
<tr>
<td style="width:100px;">Last name:</td><td><input type="text" name="last_name" id="last_name" maxlength="20"/></td>
</tr>
<tr>
<td>Email:</td><td><input type="text" name="email" maxlength="36" id="email"/></td>
</tr>
<tr>
<td>Daytime phone:</td><td><input type="text" name="phone" maxlength="15" id="phone_no" /></td>
</tr>
<tr>
<td>Mobile phone:</td><td><input type="text" name="mobile" maxlength="15" id="mobile" /></td>
</tr>
<tr style="display:none;color:red" id="warning">
<td colspan="2" align="center" >All fields are mandatory</td>
</tr>
</table>
請看http://jsfiddle.net/2W6fk/3/
function form_validate(){
var error = 0;
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var mobile_no_length = $('#mobile').val().trim().length
$(".text_field").each(function(n,element){
$(this).removeClass('warning');
if ($(element).val().trim().length < 1) {
$("#warning td").text("All fields are mandatory.");
$(this).addClass('warning');
$("#warning").show();
error++;
}else if($(element).attr('name')=='email'){
if (!emailReg.test($(element).val())){
$("#warning td").text("Enter a valid email address.");
$(this).addClass('warning');
$("#warning").show();
error++;
}
}else if(mobile_no_length < 1){
if (isNaN($(element).val())){
$("#warning td").text("Enter valid phone number.");
$(this).addClass('warning');
$("#warning").show();
error++;
}
}
});
if(error){
return false;
}else{
return true;
}
}
$('input[type=button]').on("click",function(){
form_validate();
});
$("#mobile, #phone_no").on("keyup", function(event) {
var limitField = $(this).val().trim().length;
var limit = "12"
this.value = this.value.replace(/[^0-9_\-\.]/g, '');
var id = $(this).attr('id')
if (limitField > limit) {
$("#"+id).val($(this).val().trim().substring(0, limit));
}
});
注意:我添加了text_field
類,電子郵件和電話除外。 現在,我正在同時驗證#mobile, #phone_no
。 現在,您不能在該字段中鍵入字符( You can type only integers
)。 然后我允許電話號碼up to 12 digits
。 請根據您的要求進行更改。 如果您不想驗證#phone_no
請從驗證中刪除。
我還錯過任何其他驗證嗎?
這是我用於簡單電子郵件驗證的正則表達式
/[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}/g
如您所見,這里檢查大寫和小寫以及數字和其他一些字符。 由於存在某些域擴展名,例如.travel ect,最后一組接受2到6個字符。
編輯:如果電子郵件為空http://jsfiddle.net/VjDFr/
$(document).ready(function(){
var reg = /[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}/
alert(reg.test($('#f').val()));
});
Javascript沒有本機trim()
函數,但是您可以輕松擴展String
的prototype
來定義一個prototype
:
String.prototype.trim = function ()
{
return this.replace(/^\s+/, '').replace(/\s+$/, '');
}
這樣,您可以在擁有的任何Javascript字符串上調用trim()
,例如:
var s = ' This is a string! ';
alert(s.trim()); // Alerts: "This is a string!"
而且由於您使用的是jQuery,因此您也可以只使用:
$.trim(yourString);
希望這可以幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.