H5表单验证1

最新推荐文章于 2022-03-23 19:06:54 发布

蔡蔡动起来

最新推荐文章于 2022-03-23 19:06:54 发布

阅读量1.3k

点赞数 2

分类专栏： h5 文章标签： h5表单验证

本文链接：https://blog.csdn.net/weixin_40512519/article/details/82813971

版权

h5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前台提交信息到后台有Ajax无刷新页面提交、Form表单提交。

h5表单中新增了哪些类型？ email、url、number、range、date(date、month、week、time、datetime、datetime-local)、search、color、tel等
文本框中，输入一次，下一次再输入会自动提示是哪个属性？ autocomplete='off/on'
提示选择如何实现？ list和datelist
初始化页面之后，如何让input自动获得焦点？ autofocus
h5如何设置表单元素必填。 required
h5表单验证如何使用正则？ pattern
h5表单中设置了必填，提交表单的时候如何做到不验证？ novalidate(form应用的)和formnovalidate(input和submit上应用的)

<body>
<form action="" method="post" enctype="multipart/form-data" ><!--加novalidate，点击提交表单不验证-->
    <input type="file"/><!--input要写file时 form要加enctype属性-->
    <label for="">用户名</label>
    <input type="text" name="user" placeholder="请输入用户名" required autofocus/>
    <label for="">工号</label>
    <input type="text" name="gonghao" placeholder="请输入工号" pattern="^\d{5}[imooc]$"/>

    <input type="text" list="tips"/>
    <dataList id="tips">
        <option value="dwdwfef"></option>
        <option value="dwdwfef1"></option>
        <option value="dwdwfef2"></option>
        <option value="dwdwfef3"></option>
    </dataList>
   <!-- <input type="submit" formnovalidate=""/>-->
    <input type="submit" value="提交"/>

</form>
</body>

在H5中，上传文件的时候要设置发送到服务器之前对表单数据编码：ectype="multipart/form-data";

label中for的应用：for常与radio与checkbox用


<!--点击文字，radio按钮选中-->
    <label for="man">男</label>
    <input type="radio" name="sex" id="man" required/>

    <label for="woman">女</label>
    <input type="radio" name="sex" id="woman" required/>

html5约束验证API:

valCheck.valid

执行完毕，我们会得到一个布尔值，它表示表单控件是否已通过了所有的验证约束条件。可以把valid特性看做是最终验证结果：如果所有八个约束条件都通过了，valid特性就是true，否则，只要有一项约束没通过，valid标志都是false。

willValidate属性：元素约束有没有被符合。如果没有被符合返回false。
validity属性
validationMessage属性
checkValidity()方法
setCustomValidity()方法:修改提示信息

validity属性:

<head>
    <script>
        var usernames=document.getElementById('user');
        console.log(usernames.validity);
        //上面和下面返回的结果一样
        console.log(user.validity);
    </script>
</head>
<body>
<form action="" method="post">
    <input type="text" name="username" id="user" placeholder="请输入" required pattern="^\d{4}$"/>
    <input type="submit" value="提交"/>
</form>

valid:true//当前输入是否有效

badInput: false //输入无效，如number框输入abc

patternMismatch: false //正则表达式验证失败

rangeOverflow: false //输入值超过max的限定

rangeUnderflow: false //输入值小于min的限定

tooLong : false //输入的字符数超过maxlength

tooShort : false //输入的字符数小于minlength

stepMismatch : false //输入的数字不符合step限制

typeMismatch : false //输入值不符合email、url的验证

valueMissing : false //未输入值，违反了required要求

customError : false //是否存在自定义错误

1、valueMissing
目的：确保表单控件中的值已填写。
用法：在表单控件中将required特性设置为true。
示例：
<input type="text" name="myText" required>
详细说明：如果表单控件设置了required特性，那么在用户填写或者通过代码调用方式填值之前，控件会一直处于无效状态。例如，空的文本输入框无法通过必填检查，除非在其中输入任意文本。输入值为空时，valueMissing会返回true。

2、typeMismatch
目的：保证控件值与预期类型相匹配(如numbe、email、URL等).
用法：指定表单控件的type特性值。
示例：
<input type="email" name="myEmail">
详细说明：特殊的表单控件类型不只是用来定制手机键盘，如果浏览器能够识别出来表单控件中的输入不符合对应的类型规则，比如email地址中没有@符号，或者number型控件的输入值不是有效的数字，那么浏览器就会把这个控件标记出来以提示类型不匹配。无论哪种出错情况，typeMismatch将返回true。

3、patternMismatch
目的：根据表单控件上设置的格式规则验证输入是否为有效格式。
用法：在表单控件上设置pattern特性，井赋予适当的匹配规则。
示例：
<input type="text" name="creditcardnumber" pattern="[0-9]{16}" title="A credit
card number is 16 digits with no spaces or dashes">
详细说明：pattern特性向开发人员提供了一种强大而灵活的方式来为表单的控件值设定正则表达式验证机制。当为控件设置了pattern特性后，只要输入控件的值不符合模式规则，patternMismatch就会返回true值。从引导用户和技术参考两方面考虑，你应该在包含pattern特性的表单控件中设置title特性以说明规则的作用。

4、tooLong
目的：避免输入值包含过多字符。
用法：在表单控件上设置maxLength特性。
示例：
<input type="text" name="limitedText" maxLength="140">
详细说明：如果输入值的长度超过maxLength， tooLong特性会返回true。虽然表单控件通常会在用户输入时限制最大长度，但在有些情况下，如通过程序设置，还是会超出最大值。

5、rangeUnderflow
目的：限制数值型控件的最小值。
用法：为表单控件设置min特性，并赋予允许的最小值。
示例：
<input type="range" name="ageCheck" min="18">
详细说明：在需要做数值范围检查的表单控件中，数值很可能会暂时低于设置的下限。此时，ValidityState的rangeUnderflow特性将返回true。

6、rangeOverflow
目的：限制数值型控件的最大值。
用法：为表单控件设置max特性，并赋予允许的最大值。
示例：
<input type="range" name="kidAgeCheck" max="12">
详细说明：与rangeUnderflow类似，如果一个表单控件的值比max更大，特性将返回true。

7、stepMismatch
目的：确保输入值符合min、max及step即设置。
用法：为表单控件设置step特性，指定数值的增量。
示例：
<input type="range" name="confidenceLevel" min="0" max="100" step="5">
详细说明：此约束条件用来保证数值符合min、max和step的要求。换句话说，当前值必须是最小值与step特性值的倍数之和。例如，范围从0到100，step特性值为5，此时就不允许出现17，否则stepMismatch返回true值。

8、customError
目的：处理应用代码明确设置及计算产生的错误。
用法：调用setCustomValidity(message)将表单控件置于customError状态。
示例：
passwordConfirmationField.setCustomValidity("Password values do not match.");
详细说明：浏览器内置的验证机制不适用时，需要显示自定义验证错误信息。当输入值不符合语义规则时，应用程序代码应设置这些自定义验证消息。
自定义验证消息的典型用例是验证控件中的值是否一致。例如，密码和密码确认两个输人框的值不匹配。只要定制了验证消息，控件就会处于无效状态，并且customError返回true。要清除错误，只需在控件上调用setCustomValidity("")即可。

上述属性值的特性：

(1)只要有一个验证方面错误，某个属性就为true，valid值为false

(2)只有没有任何验证错误，所有的属性都为false，valid才能为true

(3)上述的每个错误在浏览器内部都有一个预定义的错误提示消息

(4)所有的错误消息中，只要存在“自定义的错误消息”，浏览器只显示自定义的错误消息，优先级高于浏览器预定义的错误消息

(5)当前没有自定义错误消息，所以customError : false

设置自定义错误消息的方法：
input.setCustomValidity('错误提示消息');
//这个相当于将input.validity.customError:true

取消自定义错误消息的方法：
input.setCustomValidity("");
//这个相当于将input.validity.customError:false

<body>
<form action="">
    <input type="text" id="user" required/><br/>
    <input type="submit" value="提交"/>
</form>
<script>
    var user=document.getElementById("user");
    user.setCustomValidity("大哥，用户名必填")
</script>

</body>

<form action="">
    <input type="text" name="username" id="user" placeholder="请输入" required pattern="^\d{4}$" value="1111"/>
    <input type="submit" value="提交"/>
</form>

若value='aaa',则patternMismatch:true.如果value为空的话，为false。

在谷歌浏览器中，框框的右边会出现小叉号。想要改变叉号的样式：

 <style>
        input[type="search"]::-webkit-search-cancel-button{
            -webkit-appearance: none;
            height: 15px;
            width: 15px;
            background-color: red;
        }
</style>

<input type="search" id="search" value=""/>

<input type="number" id="numbers" max="8" min="5" value="2"/><!--假设要设置最大长度和最小长度，用max min,不用maxLength-->

但是设置了max和min，我们还能输入比8个字母或数字多的字符。限制number的字符长度：

<input type="number" id="numbers" oninput="checkLength(this,5)"/>

<script>
    function checkLength(obj,length){
        if(obj.value>length){
            obj.value=obj.value.substr(0,length);
        }
    }

</script>

step:保留几位小数,设置步长。

按照0.01的步长走。

 <input type="number" id="numbers" step="0.01" value="0.02" oninput="checkLength(this,5)"/>

去掉number的上下箭头：

   <style>  
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button{
            -webkit-appearance: none;
            margin: 0;
        }
    </style>

checkValidity()方法：

如果元素没有满足它的任意约束，返回false，其他情况返回true。一个input有很多约束条件，所有的约束条件如果都满足了，才返回true。只要有一个不满足，就会返回false.

<form action="">
    <input type="text" name="username" id="user" placeholder="请输入" required pattern="^\d{4}$" value="1111"/>
     <input type="email" id="emails" value="dsed"/>
</form>

<script>
 var usernames=document.getElementById('user');
 if(usernames.checkValidity()){
        alert("用户名符合");
    }else{
        alert("不符合");
    }

    if(emails.checkValidity()){
        alert("是一个邮箱");
    }else{
        alert("不是一个邮箱");
    }

</script>

setCustomValidity()

表单输入不能为空和格式：

  <style>
        input[type="text"]{
            border: 1px solid #cccccc;
            width: 150px;
            height: 30px;
            border-radius: 5px;
        }
        input[type="submit"]{
            background-color: #eeeeee;
            border: 1px solid #ddd;
            width: 60px;
            height: 33px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<form action="" name="test" method="post">
    <input type="text" required pattern="^\d{4}" placeholder="请输入代码" oninput="checkit(this)"/>
    <input type="submit" value="验证"/>
</form>

<script>
function checkit(obj){
    var it=obj.validity;
    if(true===it.valueMissing){//required
        obj.setCustomValidity("不能为空");
    }else{
        if(true===it.patternMismatch){
            obj.setCustomValidity("必须是4个数字");
        }else{
            obj.setCustomValidity("");
        }

    }
}
</script>
</body>

蔡蔡动起来

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
H5表单验证1

前台提交信息到后台有Ajax无刷新页面提交、Form表单提交。h5表单中新增了哪些类型？ email、url、number、range、date(date、month、week、time、datetime、datetime-local)、search、color、tel等文本框中，输入一次，下一次再输入会自动提示是哪个属性？ autocomplete='off/on' 提示选择如何实...
复制链接

扫一扫