html5的表单验证

html5表单新增的类型:

邮箱验证:email网址验证:url电话号码验证:tel数字验证:number查找:search日期选择:date选择周:week选择月:month日期和时间:datetime   非本地时间日期和时间:fatetime-local 本地时间颜色:color范围值:range

文本框中,输入一次,下一次会自动提示的属性为autocomplete

初始化页面后,让第一个输入框为焦点的属性为autofocus

设置表单元素必须填写的属性为required

设置表单验证使用正则的属性为pattern

不验证的属性为novalidate(form),按钮为formnovalidate

 

如果要设置一个上传文件的input,需要在form标签中添加enctype属性,这里设置了autocomplete为off,不会有记住密码的功能。

placeholder默认显示的值,required表示必填字段,autofocus在刷新页面时焦点在这个输入框

pattern当中可以写正则表达式进行一个匹配

list属性可以为输入框添加一个候选,需要给出id字段的值,在下面写出datalist 并且id等于,然后写option value=""

label的for用于单选框比较多一点,也是id属性对应。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5表单测试</title>
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data" autocomplete="off">
        <input type="file" name="" id="">
        
        <label for="">用户名:</label>
        <input type="text" name="user" placeholder="请输入用户名" required autofocus />
        <label for="">工号:</label>
        <input type="text" name="gonghao" placeholder="请输入工号" pattern="^\d{5}[test]$" >

        <input type="text" list="tips">
        <datalist id = "tips">
            <option value="test1"></option>
            <option value="test2"></option>
        </datalist>

        
        <label for="man">男</label>
        <input type="radio" name="sex" id="man" required>
        <label for="feman">女</label>
        <input type="radio" name="sex" id="feman" required>

        <!-- <input type="submit" formnovalidate /> -->
        <input type="submit">
        
    </form>
</body>
</html>

 

validity属性中有很多属性用于判断输入框中是否满足一些约束,obj.validity.valueMissing为是否为空,如果不为空则是false,空则是true。obj.validity.patternMismatch表示正则是否匹配,匹配则是false,不匹配则是true

obj.setCustomValidity("必须是五个数字!");setCustomValidity可以设置提醒的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>validity</title>
</head>
<body>
    <form action="" method="post">
        <label for="">id:</label>
        <input type="text" name="username" id="username" oninput="checkit(this)" placeholder="请输入id" required pattern="^\d{5}$">
        <input type="submit" value="提交">

    </form>
    <script>
        function checkit(obj){
            
            if( true== obj.validity.valueMissing){
                obj.setCustomValidity("不能为空!");
            }
            else{
                if (obj.validity.patternMismatch == true){
                    obj.setCustomValidity("必须是五个数字!");
                }else{
                    obj.setCustomValidity('');
                }
            }
        }
    </script>
</body>
</html>

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 提供了一些新的表单验证规则,可以通过设置 input 元素的 type 属性或添加相应的属性来使用。以下是一些常见的 HTML5 表单验证规则: 1. required 规则:表示该字段为必填项,如果该字段为空则无法提交表单。 2. email 规则:表示该字段必须是一个有效的电子邮件地址。 3. url 规则:表示该字段必须是一个有效的 URL 地址。 4. pattern 规则:表示该字段必须匹配指定的正则表达式。 5. min 和 max 规则:表示该字段的值必须在指定的最小值和最大值之间,适用于数字类型的表单项。 6. minlength 和 maxlength 规则:表示该字段的长度必须在指定的最小长度和最大长度之间,适用于文本类型的表单项。 7. number 规则:表示该字段必须是一个数字类型的值。 8. tel 规则:表示该字段必须是一个有效的电话号码。 9. date、time、datetime、week、month 规则:表示该字段必须是一个有效的日期或时间类型的值。 例如: ```html <form> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required><br> <label for="age">年龄:</label> <input type="number" id="age" name="age" min="18" max="60"><br> <label for="phone">电话:</label> <input type="tel" id="phone" name="phone" pattern="^\d{11}$"><br> <button type="submit">提交</button> </form> ``` 在这个例子中,邮箱输入框设置了 required 规则,表示该字段为必填项;年龄输入框设置了 min 和 max 规则,表示年龄必须在 18 到 60 之间;电话输入框设置了 pattern 规则,表示该字段必须是一个 11 位数字的电话号码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值