AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】

让我来详细讲解一下“AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】”的完整攻略。

什么是w5cValidator？

w5cValidator是一个简单易用的AngularJS表单验证框架，可以通过自定义指令来验证表单元素的合法性，并且支持内置的一些常用验证规则。

如何使用w5cValidator？

步骤一：引入w5cValidator库文件

使用w5cValidator前，需要先引入其相关的js和css文件，可以通过以下方式引入：

<!--引入资源-->
<link href="w5cValidator/w5cValidator.css" rel="stylesheet">
<script src="jquery/jquery.js"></script>
<script src="angular/angular.js"></script>
<script src="w5cValidator/w5cValidator.js"></script>

步骤二：定义表单元素指令

定义一个指令来验证表单元素的合法性，可以采取以下方式：

<form name="myForm" w5c-form-validate>
    <div>
        <label>姓名:</label>
        <input type="text" ng-model="name" name="name" w5c-validate="required"/>
        <div ng-show="myForm.name.$error.required">姓名不能为空</div>
    </div>
    <div>
        <label>年龄:</label>
        <input type="text" ng-model="age" name="age" w5c-validate="{required:true,number:true,min:18,max:80}">
        <div ng-show="myForm.age.$error.required">年龄不能为空</div>
        <div ng-show="myForm.age.$error.number">年龄必须为数字</div>
        <div ng-show="myForm.age.$error.min">年龄必须大于等于18岁</div>
        <div ng-show="myForm.age.$error.max">年龄必须小于等于80岁</div>
    </div>
</form>

这个例子中，我们分别对姓名和年龄进行了验证，姓名必须为非空，而年龄必须为非空、数字，并且值必须在18岁到80岁之间。如果验证失败，则会在页面上显示相应的提示信息。

步骤三：自定义错误消息

如果你不喜欢w5cValidator默认提供的错误提示信息，你可以通过以下方式来自定义错误信息：

<form name="myForm" w5c-form-validate>
    <div>
        <label>邮编:</label>
        <input type="text" ng-model="zipcode" name="zipcode" w5c-validate="{required:true,zipcode:true}">
        <div class="tip" ng-show="myForm.zipcode.$error.required">邮编不能为空</div>
        <div class="tip" ng-show="myForm.zipcode.$error.zipcode">邮编格式不正确</div>
    </div>
</form>

注意到在这个例子中，我们为每个错误信息都添加了一个class为“tip”，并在css文件中进行了相应的样式定义，这样就可以让错误信息更加美观，并且易于修改。

步骤四：使用w5cValidator插件

如果你想使用w5cValidator插件，可以通过以下方式进行引入：

<script src="w5cValidator/w5cValidator.plugin.js"></script>

接下来，你可以通过以下方式来使用w5cValidator插件：

<form name="myForm" w5c-form-validate w5c-ext-submit="submit()">
    <div>
        <label>邮箱:</label>
        <input type="text" ng-model="email" name="email" w5c-validate="{required:true,email:true}">
        <div class="tip" ng-show="myForm.email.$error.required">邮箱不能为空</div>
        <div class="tip" ng-show="myForm.email.$error.email">邮箱格式不正确</div>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

注意到在这个例子中，我们在

标签中添加了一个指令名为“w5c-ext-submit”的指令，并指定了它对应的回调函数“submit()”，这样就可以在表单验证成功后自动调用该回调函数了。

w5cValidator扩展插件示例一

以下示例演示如何使用w5cValidator扩展插件来解决IE8性能问题。

在IE8中，由于其性能问题，对于大表单的验证，可能会出现卡死、卡顿等现象。为了解决这个问题，w5cValidator提供了一个专门的扩展插件来处理，可以通过以下方式引入该插件：

<script src="w5cValidator/w5cValidator.plugin.js"></script>
<script src="w5cValidator/ie8-plugin.js"></script>

引入插件后，可以通过以下方式来使用：

<form name="myForm" w5c-form-validate w5c-ext-submit="submit()">
    <div>
        <label>学号:</label>
        <input type="text" ng-model="student_id" name="student_id" w5c-validate="{required:true}">
        <div class="tip" ng-show="myForm.student_id.$error.required">学号不能为空</div>
    </div>
    <!--省略其它表单元素-->
    <button type="submit" class="btn btn-primary">提交</button>
</form>

w5cValidator扩展插件示例二

以下示例演示如何使用w5cValidator扩展插件来限制表单提交的频率。

有时候，我们想要限制表单的提交频率，防止用户重复提交，可以通过以下方式实现：

<form name="myForm" w5c-form-validate w5c-ext-submit="submit()" w5c-ext-submit-throttle="2000">
    <div>
        <label>学号:</label>
        <input type="text" ng-model="student_id" name="student_id" w5c-validate="{required:true}">
        <div class="tip" ng-show="myForm.student_id.$error.required">学号不能为空</div>
    </div>
    <!--省略其它表单元素-->
    <button type="submit" class="btn btn-primary">提交</button>
</form>

注意到在这个例子中，我们在

标签中添加了一个指令名为“w5c-ext-submit-throttle”的指令，并指定了它对应的的时间参数“2000”，这样就可以限制表单的提交频率为2000毫秒。