Question

我想通过Javascript逐步验证表单。例如，我喜欢这样，只要用户填写输入框并转到另一个输入框，就会调用Javascript函数。换句话说，我想创建一个实时验证。

HTML：

<form id="form_register" method="post" action="">
        <fieldset>
            <legend>Register</legend>
                <ul>
                    <li>
                        <label for="username">Username:</label>
                        <input type="text" name="username" id="username" maxlength="25" />
                    </li>
                    <li>
                        <label for="password">Email address:</label>
                        <input  type="text" name="email" id="email" maxlength="50"/>                    
                    </li>
                    <li>
                        <label for="password">Password:</label>
                        <input type="password" name="password" id="password" maxlength="32"/> 
                    </li>
                    <li>                
                        <label for="password">Confirm Password:</label>
                        <input type="password" name="cpassword" id="cpassword" maxlength="32"/> 
                    </li>
                </ul>
                <input type="submit" value="Create Account">
            </legend>
        </fieldset>
</form>

我已经创建了.js文件，它看起来像下面这个。使用Javascript：

function checkUsername(){
    //etc..
}
function checkEmail(){
    //etc..
}
function checkPassword(){
    //etc..
}
function checkConfirmPassword(){
    //etc..
}

如何将HTML页面与脚本链接？谢谢。

Answer 1

听起来您希望在每个input元素的the blur event上执行这些功能。像这样：

var usernameInput = document.getElementById('username');
usernameInput.onblur = checkUsername;

Answer 2

使用onblur事件，如here

所述

<input type="text" name="username" id="username" maxlength="25" onblur="checkUsername()" />

Answer 3

//如何将HTML页面与脚本链接？谢谢。

使用脚本标记：

另外，我不确定为什么每个人都在暗示onblur，是不是onchange更适合验证目的？为什么我们要验证值何时没有改变？只有当字段的验证依赖于其他字段的值时，才需要onblur。

Answer 4

你可以这样做：

$('input').onblur(function() {
    if ($(this).is('[name=username]')) checkUsername()
    // etc
})

Javascript：验证单输入？

4 个答案: