Jquery 表单验证工作不正常_Jquery_Forms_Validation

Jquery 表单验证工作不正常

jquery forms validation

Jquery 表单验证工作不正常,jquery,forms,validation,Jquery,Forms,Validation,我正在用jquery验证表单，但遇到了一些问题。 jquery验证代码： $(function(){ var form = $('#contactus'); var name = $('#name'); var nameInfo = $('#nameInfo'); var email = $('#email'); var emailInfo = $('#emailInfo'); var phone = $('#phone'); var p

我正在用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;
        }
    })
})

$（函数（）{
变量形式=$（“#contactus”）；
变量名称=$（“#名称”）；
变量nameInfo=$（“#nameInfo”）；
var email=$（“#email”）；
var emailInfo=$（“#emailInfo”）；
var phone=$（“#phone”）；
var phoneInfo=$（“#phoneInfo”）；
var msg=$（“#消息”）；
var msgInfo=$（'#messageInfo'）；
变量reg=/^[a-zA-Z.]+$/；
var mail=/^（[A-Za-z0-9\-\.]）+\@（[A-Za-z0-9\-\.]）+\.（[A-Za-z]{2,4}）$/；
函数validateName（）
{
如果（name.val（）=''）
{
name.addClass（'error'）；
nameInfo.text（'请填写您的全名'）；
nameInfo.addClass（'error'）；
返回false；
}否则如果（注册测试（名称）=错误）{
name.addClass（'error'）；
nameInfo.text（'只允许使用字母'）；
nameInfo.addClass（'error'）；
返回false；
}否则{
name.removeClass（'error'）；
nameInfo.text（“”）；
nameInfo.removeClass（'error'）；
返回true；
}
}
函数validateEmail（）
{
如果（email.val（）=''）
{
email.addClass（“错误”）；
emailInfo.text（'请填写您的有效电子邮件'）；
emailInfo.addClass（'error'）；
返回false；
}else if（mail.test（email）==false）{
email.addClass（“错误”）；
emailInfo.text（“无效电子邮件”）；
emailInfo.addClass（'error'）；
返回false；
}否则{
email.removeClass（“错误”）；
emailInfo.removeClass（'error'）；
返回true；
}
}
函数validatePhone（）
{
如果（phone.val（）=''）
{
phone.addClass（'error'）；
phoneInfo.text（'请填写您的电话号码'）；
phoneInfo.addClass（'error'）；
返回false；
}否则，如果（isNaN（电话））{
phone.addClass（'error'）；
phoneInfo.text（'请填写您的电话号码'）；
phoneInfo.addClass（'error'）；
返回false；
}否则{
phone.removeClass（'error'）；
phoneInfo.removeClass（'error'）；
返回true；
}
}
函数validateMsg（）{
如果（msg.val（）=''）
{
msg.addClass（'error'）；
text（'请输入您的消息'）；
msgInfo.addClass（'error'）；
返回false；
}else if（msg.val（）.length

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

我不想在我的名字和有效的电子邮件问题的数字字符我要abc_xyz@xxx.com作为有效的电子邮件，而不是类似 abc@xyz_xxx.co或者诸如此类的事情

还可以将函数修改为

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（）函数中

change

else if(isNaN(phone));

到

我的问题的正确代码：

    $(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;
        }
    })
})

$（函数（）{
变量形式=$（“#contactus”）；
变量名称=$（“#名称”）；
变量nameInfo=$（“#nameInfo”）；
var email=$（“#email”）；
var emailInfo=$（“#emailInfo”）；
var phone=$（“#phone”）；
var phoneInfo=$（“#phoneInfo”）；
var msg=$（“#消息”）；
var msgInfo=$（'#messageInfo'）；
变量reg=/^[a-zA-Z.]+$/；
var mail=/^（[A-Za-z0-9\-\.]）+\@（[A-Za-z0-9\-\.]）+\.（[A-Za-z]{2,4}）$/；
函数validateName（）
{ 
如果（name.val（）=''）
{
name.addClass（'error'）；
nameInfo.text（'请填写您的全名'）；
nameInfo.addClass（'error'）；
返回false；
}else如果（！reg.test（name.val（）））{
name.addClass（'error'）；
nameInfo.text（'只允许使用字母'）；
nameInfo.addClass（'error'）；
返回false；
}否则{
name.removeClass（'error'）；
nameInfo.text（“”）；
nameInfo.removeClass（'error'）；
返回true；
}
}
函数validateEmail（）
{ 
如果（email.val（）=''）
{
email.addClass（“错误”）；
emailInfo.text（'请填写您的有效电子邮件'）；
emailInfo.addClass（'error'）；
返回false；
}如果（！mail.test（email.val（）），则为else{
email.addClass（“错误”）；
emailInfo.text（“无效电子邮件”）；
emailInfo.addClass（'error'）；
返回false；
}否则{
email.removeClass（“错误”）；
emailInfo.text（“”）；
emailInfo.removeClass（'error'）；
返回true；
}
}
函数validatePhone（）
{ 
如果（phone.val（）=''）
{
phone.addClass（'error'）；
phoneInfo.text（'请填写您的电话号码'）；
phoneInfo.addClass（'error'）；
返回false；
}else if（isNaN（phone.val（）））{
phone.addClass（'error'）；
text（'请填写正确的号码'）；
phoneInfo.addClass（'error'）；
返回false；
}否则{
phone.removeClass（'error'）；
phoneInfo.text（“”）；
phoneInfo.removeClass（'error'）；
返回true；
}
}
函数validateMsg（）{
如果（msg.val（）=''）
{
msg.addClass（'error'）；
text（'请输入您的消息'）；
msgInfo.addClass（'error'）；
返回false；
}否则如果（msg.val（）.lengthvar reg=/^[a-zA-Z.]+$/；
应该是var reg=/^[a-zA-Z]+$/；
hab已经尝试过了..但没有效果...：（您在控制台上看到任何错误吗？在cosole上没有显示任何错误…您所说的第二个条件是什么意思？您指的是哪个函数
else if(isNaN(phone));

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

    $(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;
        }
    })
})