乔越

发表文章数:114

热门标签

, , ,

四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » 编程语言 » HTML » 【前端学习】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-API和表单相关操作》 发布于2020-05-14

分享到:
赞(0) 打赏 生成海报

评论 抢沙发

7 + 7 =


长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册