码迷,mamicode.com
首页 > Web开发 > 详细

html5新增的客户端校验

时间:2017-04-12 04:02:20      阅读:301      评论:0      收藏:0      [点我收藏+]

标签:birt   back   校验   没有   ack   input   自定义   表单   邮箱   

1.表单控件提供的checkValidity()方法进行校验。

例如:如果checkValidity()方法返回true
则表明该表单内的所有表单控件都有效。

<body>
    <form action="">
        生日:<input id="birth" name="birth" type="date"><br> 邮件地址:
        <input type="email" id="email" name="email"><br>
        <input type="submit" value="提交" onclick="return check()">
</form>
<script>
    var check = function () {
        return commonCheck(birth, 生日, 字段必须是有效的日期)
            && commonCheck(email, 邮箱, 字段必须符合电子邮件的格式)
    }
    var commonCheck = function (fieid, fieName, tip) {
        var targetEle = document.getElementById(fieid);
        if (targetEle.value.trim() == ‘‘) {
            alert(fieName + 字段必须填写);
            return false
        }
        else if (!targetEle.checkValidity()) {
            alert(fieName + tip);
            return false
        }
        return true
    }
</script>

</body>

2.自定义验证  应用h5新增的setCustomValidity()方法实现。只有当该表单没有通过校验时才能调用该方法。

例如:

<body>
    <form action="">
       图书名:<input id="name" name="name" type="text" required><br> 
        图书ISBN:<input type="text" id="isbn" name="isbn" required pattern="\d{3}-\d-\d{3}-\d{5}"
        ><br>
           图书价格:<input type="number" id="price" name="price" required min="20" max="150" step="5"
        ><br>
        <input type="submit" value="提交" onclick="check()">
</form>
<script>
    var check = function () {
      if(!document.getElementById(name).checkValidity()){
document.getElementById(name).setCustomValidity(图书名是必须的);
      }
            if(!document.getElementById(isbn).checkValidity()){
document.getElementById(isbn).setCustomValidity(图书isbn是必须的+\n而且必须符合xxx-x-xxx-xxxxx的格式(其中x代表数字));

      }
            if(!document.getElementById(price).checkValidity()){
document.getElementById(price).setCustomValidity(价格是必须的+\n而且必须在20-150之间,且是5的倍数);
      }
    }
    
</script>

 

html5新增的客户端校验

标签:birt   back   校验   没有   ack   input   自定义   表单   邮箱   

原文地址:http://www.cnblogs.com/athean/p/6696452.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!