Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法。
完整的Kendo UI 的Validator可以参见API 文档。
HTML5 的一项重要功能是HTML 5 表单校验属性, 通过设置限制属性为HTML输入设置输入类型,值域等,然后由浏览器来检查输入是否合法。 支持的几种规则有:
为了使用这些规则,可以通过为HTML输入添加对应的属性的方法来设置。比如:
<input type="email" required>
如果浏览器支持HTML5,则它会自动根据这些规则来检查输入的值是否符合规则,如果输入数据无效,浏览器会显示错误信息给用户,也不会提交表单。HTML5 也支持了一些新添的JavaScript方法来实现手工校验,比如checkValidity()方法。
HTML5 表单校验非常有用,但它也存在一些问题,比如:
Kendo UI Validator就是为了解决上面的这些问题而实现的。
Kendo UI Validator支持标准的HTML5表单校验属性,从而允许你正常使用HTML 5表单校验属性,从而可以在所有浏览器(IE7+)上使用这些属性,比如:
<div id="myform"> <input type="text" name="firstName" required /> <input type="text" name="lastName" required /> <button id="save" type="button">Save</button> </div>
然后,在页面上添加Kendo UI Validator,添加在Script部分,比如:
// Initialize the Kendo UI Validator on your "form" container // (NOTE: Does NOT have to be a HTML form tag) var validator = $("#myform").kendoValidator().data("kendoValidator"); // Validate the input when the Save button is clicked $("#save").on("click", function() { if (validator.validate()) { // If the form is valid, the Validator will return true save(); } });
使用这样的简单配置,这些HTML5 表单校验在旧版本浏览器中也可以工作,并且Web应用可以完全控制错误信息的显示和其显示风格,当点击“Save? 按钮后,如果输入不满足输入规则,Kendo UI Validator显示合适的错误信息, 每个HTML元素也可以通过validatorMessage定义一个自定义的错误信息,比如:
<input type="tel" pattern="\d{10}" validationMessage="Plase enter a ten digit phone number" />
输入项必填规则
<input type="text" name="firstName" required />
输入必须符合指定的正规表达式
<input type="text" name="twitter" pattern="https?://(?:www\.)?twitter\.com/.+i" />
最大,最小值限制
<input type="number" name="age" min="1" max="42" />
输入步骤和最大,最小值限制一同使用
<input type="number" name="age" min="1" max="100" step="2" />
输入为有效的URL
<input type="url" name="url" />
输入为有效的EMail
<input type="email" name="email" />
除此之外,Kendo UI Validator也支持自定义的规则。
使用自定义规则时的注意事项:
custom: function (input) { if (input.is("[name=firstName]")) { return input.val() === "Test" } else { return true; } }