Question

我是电子邮件验证新手。任何人都可以帮我弄清楚它为什么不能正常工作。我有一个简单的表单，其中包含名称，密码，确认密码，电子邮件和URL的字段。如果这些字段中的任何一个出现任何错误，我不希望处理该表单。如果没有错误，我想要显示消息your form is submitted succesfully。

这是代码。

HTML：

<form id='contactForm'>
    <label for='firstAndLastname'></label>
    <input type='text' data-count='0' placeholder='Firstname Lastname' name='firstAndLastname' class='fName' />
    <span></span>

    <label for='password'></label>
    <input type='password' data-count='1' placeholder='Password' name='password' class='password' />
    <span></span>

    <label for='confirmPassword'></label>
    <input type='password'  placeholder='Confirm Password' name='confirmPassword' class='confirmPassword' />
    <span></span>

    <label for='email'></label>
    <input type='email' data-count='2' placeholder='Email' name='email' class='email' />
    <span></span>

    <label for='url'></label>
    <input type='url' data-count='3' placeholder='Website' name='url' class='url' />
    <span></span>

    <input type='submit' id='submit' value='Submit' />
</form>

CSS：

input {
    display: block;
    margin: 10px 0;
}

JavaScript的：

//url validation
function validateURL(url){
    var urlRegExp = /^(http|https):\/\/(([a-zA-Z0-9$\-_.+!*'(),;:&=]|%[0-9a-fA-F]{2})+@)?(((25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9]|[1-9][0-9]|[0-9])(\.(25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9]|[1-9][0-9]|[0-9])){3})|localhost|([a-zA-Z0-9\-\u00C0-\u017F]+\.)+([a-zA-Z]{2,}))(:[0-9]+)?(\/(([a-zA-Z0-9$\-_.+!*'(),;:@&=]|%[0-9a-fA-F]{2})*(\/([a-zA-Z0-9$\-_.+!*'(),;:@&=]|%[0-9a-fA-F]{2})*)*)?(\?([a-zA-Z0-9$\-_.+!*'(),;:@&=\/?]|%[0-9a-fA-F]{2})*)?(\#([a-zA-Z0-9$\-_.+!*'(),;:@&=\/?]|%[0-9a-fA-F]{2})*)?)?$/;
    return urlRegExp.test(url);
}

//email validation
function validateEmail(email){
    var pattern = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return pattern.test(email);
}

$('#submit').on('submit', function(e){
    var name = $.trim($('.fName').val()),
    password = $.trim($('.password').val()),
    confirmPassword = $.trim($('.confirmPassword').val()),
    email = $.trim($('.email').val()),
    url = $.trim($('.url').val());

    if (name === '' || password === '' || confirmPassword === '' || email === '' || url==='') {
        e.preventDefault();
    } else if($('.password').val() !== $('.confirmPassword').val()) {
        e.preventDefault();
    } else if(validateEmail($('.email').val() === false)){
        var el = validateEmail($('.email').val());
        console.log(el);
        e.preventDefault();
    } else if(validateURL($('.url').val() === false)){
        e.preventDefault();
    } else {
        console.log('bar');
        //$('.error-message').fadeIn('slow');
        e.preventDefault();
    }
});

JS Bin链接：http://jsbin.com/dimam/1/edit?html,css,js,console,output

Answer 1

我完全改变了我的回答来描述我在这里所做的工作：

http://jsfiddle.net/HPLXg/38/

您的RegExp模式字符串末尾有;。这些类型的字符串不是必需的。
你在错误的DOM元素上绑定了submit。它需要绑定在表单上而不是提交按钮。
由于表单未作为live内容动态添加到DOM中，因此您不需要使用.on()函数，而只需使用.submit()即可功能
我还在if语句中添加了其他小清理：
- 使每个检查都是自己的if语句而不是else if | else进展，这样每个字段都会被单独检查，所有错误都会一次显示，而不是每次用户点击提交时出现一个错误
- 更改了if语句中的所有$(..).val()引用，以使用您已在.submit()函数的变量声明区域中收集的变量。如果您不打算使用它们，那么制作值变量就没那么多了......
- 最后，为您的错误添加了一些颜色，以指示哪些字段不符合您的规则

客户端JavaScript验证无效

1 个答案: