【前端学习】HTML5-API和表单相关操作

表单验证

HTML5验证API

验证API的属性:

属性名称 描述
validity 一个ValidityState对象,描述元素的验证状态
validity.customError 如果元素设置了自定义错误,返回true;否则返回false
validity.patternMismatch 如果元素的值不匹配所设置的正则表达式,返回true;否则返回false
validity.rangeOverflow 如果元素的值高于所设置的最大值,返回true,否则返回false
validity.rangeUnderflow 如果元素的值低于所设置的最小值,返回true;否则返回false
validity.stepMismatch 如果元素的值不符合step属性的规则,返回true;否则返回false
validity.tooLong 如果元素额的值超过所设置的最大长度,返回true;否则返回false
validity.typeMismatch 如果元素的值出现语法错误,返回true;否则返回false
validity.valueMissing 如果元素设置了required属性且值为空,返回true;否则返回false
validity.valid 如果元素的值不存在验证的问题,返回true;否则返回false

验证API的方法:

方法 描述
checkValidity( ) 如果元素的值不存在验证问题,返回true,否则返回false
setCustomValidity(message) 为元素添加一个自定义的错误消息;如果设置了自定义错误消息,则该元素被认为是无效的,并显示制定的错误
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        HTML表单组建元素的验证属性
        - required  验证当前元素不能为空
        - pattern  验证当前元素输入的是否是跟正则表达式相匹配


     -->
    <form action="#">
        <input type="text" id="username" required pattern="^[0-9a-zA-Z]{6-12}$">
        <input type="submit">
    </form>
    <script>
        var username = document.getElementById('username')
        console.log(username.validity);


        /*
        - validity属性由表单元素组建所提供;由此得到validityState对象,这个对象提供了一系列的验证属性
            setCustomValidity(message)
                - 作用:替换浏览器默认的错误提示信息
                - 注意:如果输入正确,必须将错误提示信息设置为空
        */
        username.addEventListener('blur', function () {
            if (username.validity.valueMissing) {
                username.setCustomValidity('不能为空')
            }else{
                username.setCustomValidity('')
            }

            /*
                patternMismatch属性
                    - 作用:配合元素中pattern属性来使用
            */
            if (username.validity.patternMismatch) {
                username.setCustomValidity('格式错误')
            }else{
                username.setCustomValidity('')
            }

            /*
                - rangeOverflow:配合元素中max属性使用
                - rangeUnderflow:配合元素中min属性使用
                - stepMismatc:配合元素中step属性使用
                - tooLong:配合元素中maxlength属性使用
                - tooShort:配合元素中minlength属性使用
                - typeMismatch:配合<input type="url">等元素来使用
                - customError:配合setCustomValidity()方法使用
                - valid:验证当前元素是否验证通过
                    * true:表示当前元素验证通过
                    * false:表示当前元素验证不通过
            */
         })

    </script>
</body>

</html>

表单提交

submit事件

提交表单时,会触发submi事件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="" method="POST">
        <input type="text" name='data'>
        <input type="submit" value="提交">
    </form>
    <script>
        var form = document.forms[0];
        form.addEventListener('submit', function () {
            alert('表单已被提交')
        })
    </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="#">
        <input type="text" id="username">
        <input type="button" id="btn" value="提交">
    </form>
    <script>
        var btn = document.getElementById('btn')
        btn.addEventListener('click', function () {
            var form  = document.forms[0]
            form.submit()
            console.log("表单被提交");

        })
    </script>
</body>

</html>

表单还提供了submit()方法用于提交表单,使用该方法时允许表单内使用任一普通按钮即可(并非提交按钮)

上一篇

【前端学习】HTML5延迟执行和周期执行,案例