1

我正在用 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>
4

3 回答 3

0

请看一下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请从验证中删除。

我错过了任何其他验证吗？

于 2013-05-23T12:53:23.870 回答
0

这是我用于简单电子邮件验证的正则表达式

/[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}/g

如您所见，检查大小写和数字以及其他一些字符。最后一组接受 2 到 6 个字符，因为有一些域扩展名，例如 .travel 等。

编辑：如果电子邮件为空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()));
});
于 2013-05-23T12:58:19.737 回答
0

Javascript 没有原生trim()函数，但您可以轻松扩展String'sprototype来定义一个：

String.prototype.trim = function ()
{
    return this.replace(/^\s+/, '').replace(/\s+$/, '');
}

这样您就可以调用trim()您拥有的任何 Javascript 字符串，例如：

var s = '   This is a string!  ';
alert(s.trim()); // Alerts: "This is a string!"

由于您使用的是 jQuery，因此您也可以使用：

$.trim(yourString);

希望这可以帮助。

于 2013-05-23T13:09:50.923 回答