Question

我想用jQuery执行表单验证。现在我在输入标签中使用HTML5'required'，并且这个jQuery代码用于验证：

jQuery的：

$("#register").click(function() {

    $("#register input").each(function() {
        $(this).css('border','none');
        if(!$(this).val()) {
            $(this).css('border','solid 1px red');
        }
        var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
        if($(this).attr("type")=="email" && !email_reg.test($(this).val())){
            $(this).css('border','solid 1px red');
        }
    });

使用IE9时，HTML5中不支持“必需”，因此尽管脚本正在运行，但它仍在运行输入操作.php文件。我很高兴知道我可以使用现有代码修复它，而无需使用validate.js或其他外部文件。

HTML5：

<form id="register" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>" method="post">
<p><label>First name</label><input type="text" id="name" name="name" required="true" /></p>
<p><label>Last name</label><input type="text" id="fname" name="fname" required="true" /></p>
<p><label>Email</label><input type="email" id="email" name="email" required="true" /></p>
<p>
    <label>Phone</label>
    <input id="area-code" type="text" name="code" maxlength="3" required="true" onkeydown="return isNumber(event);" />
    <input id="phone" type="text" name="phone" required="true" maxlength="17" onkeydown="return isNumber(event);" />

</p>
<input type="submit" value="GET BONUS NOW" id="submit-btn" />
<?php include 'form.php';?>

Answer 1

您需要将验证从click事件更改为submit：

$("#register").submit(function() {

修改你的代码以查找带有一些布尔标志的错误，如果发现错误则返回false：

var errors = false;
$("#register input").each(function() {

    $(this).css('border','none');
    if(!$(this).val()) {
        $(this).css('border','solid 1px red');
        errors = true;
    }
    var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
    if($(this).attr("type")=="email" && !email_reg.test($(this).val())){
        $(this).css('border','solid 1px red');
        errors = true;
    }
});
if( errors ) {
    return false;
}

使用jQuery进行表单验证（不使用validation.js）

1 个答案: