HTML5表单验证

最新推荐文章于 2020-04-07 22:43:26 发布

lianliange85

最新推荐文章于 2020-04-07 22:43:26 发布

阅读量1.6k

点赞数

分类专栏： HTML5

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

http://lucifinilhades.iteye.com/blog/1186033

自定义错误信息

HTML5中许多新的input元素都带有对输入内容进行有效性检查的功能，如果检查不通过，浏览器会针对该元素提供错误信息。但有时开发者不想使用这些默认的错误信息提示，而想使用自定义的信息提示，或者有时想给某个文本框增加一种错误信息提示等。要实现这样的功能，可以使用JavaScript调用各input元素的setCustomValidity()方法来自定义错误信息。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8"/>  
    <title>自定义错误信息示例</title>  
    <script type="text/javascript">  
        var check = function() {  
            var passwd1 = document.forms['testForm'].passwd1;  
            var passwd2 = document.forms['testForm'].passwd2;  
            if(passwd1.value != passwd2.value) {  
                passwd2.setCustomValidity("密码不一致！");  
                return false;  
            } else {  
                passwd2.setCustomValidity("");  
            }  
            var email = document.forms['testForm'].email1;  
            if(!email1.checkValidity()) {  
                email1.setCustomValidity("请输入正确的E-mail地址！");  
                return false;  
            }  
            return true;  
        }  
    </script>  
</head>  
<body>  
    <form id="testForm" name="testForm" οnsubmit="return check();">  
        <label for="pass1">密码:</label><input type="password" name="passwd1"/><br/>  
        <label for="pass2">确认密码:</label><input type="password" name="passwd2"/><br/>  
        <label for="email">E-mail:</label><input type="email" name="email1"/><br/>  
        <button type="submit">提交</button>  
    </form>  
</body>  
</html>

http://www.cnblogs.com/Wenwang/archive/2012/04/26/2470403.html

<form name="passwordChange">
    <p><label for="password1">New Password:</label>
    <input type="password" id="password1" οnchange="checkPasswords()"></p>
    <p><label for="password2">Confirm Password:</label>
    <input type="password" id="password2" οnchange="checkPasswords()"></p>
</form>
<button οnclick="document.passwordChange.password1.checkValidity()">Check Validity</button>
function checkPasswords() {
        var pass1 = document.getElementById("password1");
        var pass2 = document.getElementById("password2");

        if (pass1.value != pass2.value)
            pass1.setCustomValidity("两次输入的密码不匹配");
        else
            pass1.setCustomValidity("");

input onchange事件：

按一般理解上的意义来说，onchange应该是在文本框里内容有变化时发现，就是每输入一个字符都应该触发一次，然而结果却表明IE是在输入时并没有触发，而是在input失去焦点时触发了onchange事件，“基本等同于”onblur事件，但onblur事件却没有这个BUG，说明IE对onchange支持有问题。

当一个HTML元素的属性改变的时候，都能通过onpropertychange来捕获。例如< input name="text1" id="text1" />对象的value属性被页面的脚本修改的时候，onchange无法捕获到，而onpropertychange却能够捕获。

具体理解为：onpropertychange能及时捕获属性值的变化，而onchange在属性值改变时只有通过鼠标执行某些操作才能激活该事件！

但onpropertychange只有IE支持，FireFox下的怎么解决呢？firefox的事件oninput，效果和IE的onproperchange相同。

幸好我们还有一些秘密武器onpopertychange和oninput。onpopertychange事件只在IE下才有效，oninput事件则支持FF/Opera/Safari/NetScape。这2个事件在输入开启状态下仍然可以捕获输入框的输入动作及其值。