验证

这个样例演示如何使用wjValidationError指令来使用HTML5本地验证或AngularJS的窗体验证来验证字段。

wjValidationError指令包含一个表达式，返回一个错误字符串。如果这个字符串为空，这个元素认为是有效的。 如果这个字符串不为空，这个字段认为是非法的，同时字符串作为错误信息。

比如，下面的窗体有一个“check password”字段，它是按下面这样定义的：

<input type="password"
    placeholder="Password" 
    name="pwd" ng-model="thePwd" 
    required pattern=".{2,}" title="Please enter 2 characters or more." />
<input type="password"
    placeholder="Check Password"
    name="chk" ng-model="chkPwd"
    wj-validation-error="chkPwd != thePwd ? 'Passwords don\'t match' : ''" />

该窗体也包括Wijmo InputDate和InputField控件。 这两个控件都有min和max属性，可以处理简单的验证并且可以阻止用户输入非法数据。 在这个样例中，我们不使用这些属性，演示Wijmo输入控件可以像本地输入元素那样可以进行验证。

查看当你在两个窗体输入数据会发生什么

左边的窗体会以红色边界的形式显示验证错误。一些浏览器会为非法输入元素添加一个工具条。 如果你在任意一个字段处在非法状态时按下“create Account”，浏览器会显示第一个非法字段的错误信息。

右边的窗体在你修改一个字段并且移动焦点到下一个元素时才会显示验证错误。 它可能会一次显示多个错误。“Create Account”按钮在没有任何错误的情况下才会可用。

注意尽管HTML5指定了一些验证信息，但不是所有的浏览器都全部支持他们。 例如，IE11不支持HTML5的minlength属性，但是谷歌浏览器支持。在这个样例， 我们使用pattern属性来处理这个限制。我们也可以使用wj-validation-error或ng-minlength指令。