1

我正在使用 jquery 验证表单并遇到一些问题。jquery验证码：

$(function(){
    var form = $('#contactus');
    var name = $('#name');
    var nameInfo = $('#nameInfo');
    var email = $('#email'); 
    var emailInfo = $('#emailInfo');
    var phone = $('#phone');
    var phoneInfo = $('#phoneInfo');
    var msg = $('#message');
    var msgInfo = $('#messageInfo');
    var reg=/^[a-zA-Z. ]+$/;
    var mail=/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 





    function validateName()
    {
        if(name.val()=='')
        {
            name.addClass('error');
            nameInfo.text('Please fill up your full Name');
            nameInfo.addClass('error');
            return false;
        }else if(reg.test(name)==false){
            name.addClass('error');
            nameInfo.text('Only letters are allowed');
            nameInfo.addClass('error');
            return false;
        }else{
            name.removeClass('error');
            nameInfo.text('');
            nameInfo.removeClass('error');
            return true;
        }
    }
    function validateEmail()
    {
        if(email.val()=='')
        {
            email.addClass('error');
            emailInfo.text('Please fill in your Valid Email');
            emailInfo.addClass('error');
            return false;
        }else if(mail.test(email)==false){
            email.addClass('error');
            emailInfo.text('Invalid Email');
            emailInfo.addClass('error');
            return false;
        }else{
            email.removeClass('error');
            emailInfo.removeClass('error');
            return true;
        }
    }
    function validatePhone()
    {
        if(phone.val()=='')
        {
            phone.addClass('error');
            phoneInfo.text('Please fill in your Phone number');
            phoneInfo.addClass('error');
            return false;
        }else if(isNaN(phone)){
            phone.addClass('error');
            phoneInfo.text('Please fill in your Phone number');
            phoneInfo.addClass('error');
            return false;
        }else{
            phone.removeClass('error');
            phoneInfo.removeClass('error');
            return true;
        }
    }
    function validateMsg(){
        if(msg.val()=='')
        {
            msg.addClass('error');
            msgInfo.text('Please enter your Message');
            msgInfo.addClass('error');
            return false;
        }else if(msg.val().length<10){
            msg.addClass('error');
            msgInfo.text('Please enter at least 10 words');
            msgInfo.addClass('error');
            return false;
        }else{
            msg.removeClass('error');
            msgInfo.removeClass('error');
            return true;
        }
    }

    /*name.blur(validateName);
    email.blur(validateEmail);
    phone.blur(validatePhone);
    msg.blur(validateMsg);*/

    name.keyup(validateName);
    email.keyup(validateEmail);
    phone.keyup(validatePhone);
    msg.keyup(validateMsg);

    form.submit(function(){
        if(validateName() ,validateEmail() , validatePhone(), validateMsg() ){
            return true;
        }else{
            return false;
        }
    })
})

和 php 表单代码是：

<form name="contactus"  id="contactus" action="" method="post">
        <ul class="form_field">
            <li><label>Your Name :</label>
                <input class="form_input" type="text" name="name" id="name" value="<?php echo $_POST['name'];?>" />
                <span id="nameInfo"></span>
            </li>
            <li><label>Email Address :</label>
                <input class="form_input" type="text" name="email" id="email" value="<?php echo $_POST['email'];?>" />
                <span id="emailInfo"></span>
            </li>
            <li><label>Phone Number :</label>
                <input class="form_input" type="text" name="phone" id="phone" value="<?php echo $_POST['phone'];?>" />
                <span id="phoneInfo"></span>
            </li>
            <li><label>Your Message:</label>
                <textarea class="form_input" name="message" id="message"><?php echo $_POST['message'];?></textarea>
                <span id="messageInfo"></span>
            </li>
            <li><?php echo recaptcha(); ?></li>
            <li><label>&nbsp;</label><input type="submit" class="submit_btn" value="Submit"  name="submit"/></li>
        </ul>
    </form>

问题是没有正确验证任何表单元素的第二个条件。虽然空条件成功，但第二个条件不是。我做错了吗？欢迎提供任何帮助/建议。多谢。

4

2 回答 2

0

我的问题的正确代码：

    $(function(){

    var form = $('#contactus');
    var name = $('#name');
    var nameInfo = $('#nameInfo');
    var email = $('#email'); 
    var emailInfo = $('#emailInfo');
    var phone = $('#phone');
    var phoneInfo = $('#phoneInfo');
    var msg = $('#message');
    var msgInfo = $('#messageInfo');
    var reg=/^[a-zA-Z. ]+$/;
    var mail=/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 





    function validateName()
    { 
        if(name.val()=='')
        {
            name.addClass('error');
            nameInfo.text('Please fill up your full Name');
            nameInfo.addClass('error');
            return false;
        }else if(!reg.test(name.val())){
            name.addClass('error');
            nameInfo.text('Only letters are allowed');
            nameInfo.addClass('error');
            return false;
        }else{
            name.removeClass('error');
            nameInfo.text('');
            nameInfo.removeClass('error');
            return true;
        }
    }
    function validateEmail()
    { 
        if(email.val()=='')
        {
            email.addClass('error');
            emailInfo.text('Please fill in your Valid Email');
            emailInfo.addClass('error');
            return false;
        }else if(!mail.test(email.val())){
            email.addClass('error');
            emailInfo.text('Invalid Email');
            emailInfo.addClass('error');
            return false;
        }else{
            email.removeClass('error');
            emailInfo.text("");
            emailInfo.removeClass('error');
            return true;
        }
    }
    function validatePhone()
    { 
        if(phone.val()=='')
        {
            phone.addClass('error');
            phoneInfo.text('Please fill in your Phone number');
            phoneInfo.addClass('error');
            return false;
        }else if(isNaN(phone.val())){
            phone.addClass('error');
            phoneInfo.text('Please fill in your correct number');
            phoneInfo.addClass('error');
            return false;
        }else{
            phone.removeClass('error');
            phoneInfo.text("");
            phoneInfo.removeClass('error');
            return true;
        }
    }
    function validateMsg(){
        if(msg.val()=='')
        {
            msg.addClass('error');
            msgInfo.text('Please enter your Message');
            msgInfo.addClass('error');
            return false;
        }else if(msg.val().length<10){
            msg.addClass('error');
            msgInfo.text('Please enter at least 10 words');
            msgInfo.addClass('error');
            return false;
        }else{
            msg.removeClass('error');
            msgInfo.text("");
            msgInfo.removeClass('error');
            return true;
        }
    }

    name.blur(validateName);
    email.blur(validateEmail);
    phone.blur(validatePhone);
    msg.blur(validateMsg);

    name.keyup(validateName);
    email.keyup(validateEmail);
    phone.keyup(validatePhone);
    msg.keyup(validateMsg);

    form.submit(function(){
        if(validateName() ,validateEmail() , validatePhone(), validateMsg() ){
            return true;
        }else{
            return false;
        }
    })
})
于 2012-07-18T05:10:45.457 回答
0

我不希望我的名字中有数字字符，对于有效的电子邮件问题，我希望 abc_xyz@xxx.com 作为有效的电子邮件，而不是像 abc@xyz_xxx.co 或类似的东西

var reg=/^[a-zA-Z]+$/;
var mail=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{3}$/;

还将您的功能修改为

function validateName()
{
    var val=name.val();
    if(!reg.test(val))
    {
        if(val.length > 0) nameInfo.text('Only letters are allowed');
        else nameInfo.text('Please fill up your full Name');
        name.addClass('error');
        nameInfo.addClass('error');
        return false;
    }
    else
    {
        name.removeClass('error');
        nameInfo.text('');
        nameInfo.removeClass('error');
        return true;
    }
}

function validateEmail()
{
    var val=email.val();
    if(!mail.test(val))
    {
        if(val.length > 0) emailInfo.text('Invalid Email');
        else emailInfo.text('Please fill in your Valid Email');
        email.addClass('error');
        emailInfo.addClass('error');
        return false;
    }
    else
    {
        email.removeClass('error');
        emailInfo.removeClass('error');
        return true;
    }
}

也在你的validatePhone() function改变中

else if(isNaN(phone));

至

else if(isNaN(phone.val()));

这是正则表达式的测试。

于 2012-07-17T09:47:36.757 回答