ValueMising规则
示例：<input type="text" required value="" >
目的：确保表单控件(input元素在页面中是以一个控件的形式呈现的)中的值已填写。
用法：在表单控件中将required属性设置为true。因为required属性的默认值为true所以如示例中所示：在input元素中接添加required属性也是可以的。
详细说明：如果表单控件设置了required特性，那么在用户填写或者通过代码调用方式填值之前，控件会一直处于无效状态。例如，在示例中我们设置该控件的值为空，空的文本输入框无法通过必填检查，除非在其中输入任意文本。输入值为空时，valueMissing会返回true。表示没有通过验证。
typeMismatch规则
示例：<input type=“url” value=“miaomiaoxue”/ >
目的：保证控件值与预期类型相匹配(如numbe、email、URL等)。
用法： 指定表单控件的type特性值为numbe、email、URL等规定文本输入规则的类型。
详细说明: 特殊的表单控件类型不只是用来定制手机键盘,如果浏览器能够识别出来表单控件中的输入不符合对应的类型规则,比如email地址中没有@符号，或者number型控件的输入值不是有效的数字，示例中URL型的空间不是一个标准的链接格式。那么浏览器就会把这个控件标记出来以提示类型不匹配。无论哪种出错情况，typeMismatch将返回true。表示没有通过验证。
patternMismatch规则
示例：<input type="text" pattern=“/^[A-z]+$/" value=“1234“/>
目的：根据表单控件上设置的格式规则验证输入的文本是否为有效格式
用法：在表单控件上设置pattern特性，井赋予适当的匹配规则。
详细说明：pattern特性向开发人员提供了一种强大而灵活的方式来为表单的控件值设定正则表达式验证机制。当为控件设置了pattern特性后，只要输入控件的值不符合模式规则，如示例中设定的正则表达式规则该控件的值含有字母和$符号，这里设置的值为1234，不符合规则设定，因此patternMismatch就会返回true值。从引导用户和技术参考两方面考虑，
你应该在包含pattern特性的表单控件中设置title特性以说明规则的作用。
tooLong规则
示例：<input type=“text” maxlength=“3” value=“hello“/ >
目的：避免输入值包含过多字符。
用法：在表单控件上设置maxLength特性。
详细说明：如果输入值的长度超过maxLength，示例中最大限制设置为3，但值为hello， *** 过了3个字符的限制，tooLong规则就会返回true。虽然表单控件通常会在用户输入时限制最大长度，但在有些情况下，如通过程序设置，还是会超出最大值。
rangeUnderflow规则
示例：<input type=“text” min=“3” max=“5” value=“0" />
目的：限制数值型控件的最小值。
用法：为表单控件设置min属性，并赋予允许的最小值。
详细说明：在需要做数值范围检查的表单控件中，数值很可能会暂时低于设置的下限，如示例中设置的值为0，而设置的min属性为3。此时，rangeUnderflow属性将返回true。
rangeOverflow规则
示例：<input type=“text” min=“3” max=“5” value=“7" />
目的：限制数值型控件的最大值。
用法：为表单控件设置max属性，并赋予允许的最大值。
详细说明：与rangeUnderflow类似，如果一个表单控件的值比max属性值更大，如示例中设置的值为7，而设置的max属性为5。此时，rangeOverflow属性将返回true。
stepMismatch规则
示例：<input type=“text” min=“0” max=“100” step=“5” value=“17" />
目的：确保输入值符合min、max及step即设置。
用法：为表单控件设置step特性，指定数值的增量。
详细说明：此约束条件用来保证数值符合min、max和step的要求。换句话说，当前值必须是最小值与step属性值的倍数之和。如示例中设置的数值范围为0到100，step特性值为5，此时就不允许出现17，而可以是“0+5*X”X为（0~20）中任意一个值皆可。否则stepMismatch返回true值。
valid规则
示例：<input type=“range” min=“5” max=“20” step=“5” value=“10" />
目的：验证表单控件是否满足所有的表单验证规则
用法：适用于所有的input表单控件。
详细说明：当该表单控件满足所有验证规则时，valid属性就是true，否则，只要有一项验证规则没通过，valid属性会返回false。如示例所示就满足所有验证条件所以valid属性会返回true。注意前面几个验证属性是没有通过的情况下返回true。推荐你去教程网站秒秒学上过一遍相关知识，希望对你有帮助。
实现表单自定义验证消息，实际上很简单。大体思路为:1、首先我们要设置表单的验证规则
2、然后根据表单的验证规则定义要显示验证消息，
3、最后通过JavaScript 和CSS相结合先将所有预定义的验证消息隐藏掉，然后再根据表单中的输入是否符合验证规则来控制验证消息的显隐状态。
下面我们就来通过一个具体的示例进行讲解，你可以将这个示例直接放在浏览器中运行查看效果，但是要注意代码中引用了第三方类库jQuery，运行时你要自己设置一下：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Forms: 验证提示</title>
// 设置一些必要的样式，如验证消息的文字样式和控制验证消息显隐的样式
<style>
input:valid {
background: #fff
}
input:invalid {
background: #fcc
color: #333
}
.validation-messages {
margin-bottom:15px
}
.validation-messages span {
font-size:0.8em
background-color:#eee
padding:6px
border:1px solid #ccc
border-radius:10px
color:#666
}
//所有class属性为hide的元素都会被隐藏
.hide {
display:none
}
</style>
</head>
<body>
<article>
<h1>Forms<span>- 验证提示</span></h1>
</article>
<div id="result-stub" class="well hidden">
<form id="change-email-form" name="change-email-form">
<fieldset>
<h4>修改邮箱地址</h4>
//设置表单应该遵循的验证规则。
//pattern 属性：规定用于验证输入字段的模式。
//maxlength 属性：规定输入字段的最大长度,以字符个数计。
//required属性：规定该input元素为必须的元素。
<label>用户名:</label>
<input type="text" name="username"
id="username" pattern="[a-zA-Z ]{5,}"
maxlength="30" required />
//设置表单的验证消息，并结合class属性样式将其隐藏起来
<div>
//这里的data-rule的属性值是HTML5表单中内置的验证规则中的一种
<span data-rule="valueMissing"
class="hide">用户名不能为空.</span>
<span data-rule="patternMismatch"
class="hide">必须是字母字符(长度应为5~30个字符).</span>
</div>
<label>邮箱地址:</label>
//设置表单应该遵循的验证规则。
<input type="email" name="email" id="email"
title="Email address is required" required />
//设置表单的验证消息，并结合class属性样式将其隐藏起来
<div>
<span data-rule="valueMissing">
邮箱地址不能为空.</span>
<span data-rule="typeMismatch">
邮箱格式不正确.</span>
</div>
<hr />
//设置两个按钮，作用分别是“清空表单内容和对表单中的内容进行验证
<button type="submit" id="submit"
name="submit">修改</button>
<button type="button" id="checkValidation"
name="checkValidation"
class="btn">验证</button>
</fieldset>
</form>
</div>
<script>
window.onload= function() {
//---
// 创建一个验证规则容器。
var ruleNames = []
// 填充验证规则容器.
// 寻找所有具有验证规则的元素，然后将该元素的data-rule属性值添加到验证规则数组中去。
$("[data-rule]").each(function(i, element) {
var ruleName = element.getAttribute('data-rule')
if ($.inArray(ruleName, ruleNames) <0) {
ruleNames.push(ruleName)
}
})
var
// 首先确定用户界面隐藏了所有验证消息。
// 然后在选定的表单上运行验证规则。
validate = function() {
$(".validation-messages span")
.addClass('hide')
document.getElementById('change-email-form')
.checkValidity()
},
// 查询每个输入的元素，以确定哪个元素无效。
// 一旦检测到无效元素，就遍历验证规则，找到无效的原因，然后通过消息对用户进行提示
validationFail = function(e) {
var
element = e.srcElement,
validity = element.validity
if (!validity.valid) {
ruleNames.forEach(function(ruleName) {
checkRule(validity,
ruleName,
element)
})
e.preventDefault()
}
},
// 使用 input 元素 的ValidityState 对象的实例来运行验证规则。
//如果这个验证规则返回ture，就表示无法通过验证，在表单中就会有相应的提示信息。
checkRule = function(state, ruleName, ele) {
if (state[ruleName]) {
$(ele).next()
.find('[data-rule="'
+ ruleName + '"]')
.removeClass('hide')
}
}
// 所有验证事件处理程序是附加在input元素上的而不是button元素
$(':input:not(:button)').each(function() {
this.oninvalid = validationFail
this.onblur = validate
})
$('#checkValidation').click(validate)
}
</script>
<script src="../js/jquery.js"></script>
</body>
</html>
推荐你去教程网站秒秒学上过一遍相关知识，希望对你有帮助。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）