Giter VIP home page Giter VIP logo

angular-w5c-validator's Introduction

w5c-validator

Angular 7+ 版本的 ng-validator: https://github.com/why520crazy/ngx-validator

w5cValidator 插件基于angular.js原有的表单验证,统一验证规则和提示信息,在原有的基础上扩展了一些错误提示的功能,让大家不用在每个表单上写一些提示信息的模板,专心的去实现业务逻辑。 w5c validator自身提示信息样式使用了bootstrap的方式,当然你可以很好的扩展自己的提示方式(比如tooltip等)

demo演示:http://why520crazy.github.io/angular-w5c-validator

Change Log:https://github.com/why520crazy/angular-w5c-validator/blob/master/CHANGELOG.md

Useage:

  1. HTML 中引用 w5cValidator.js,执行 npm i ng-w5c-validator 或者 npm i angular-w5c-validator 或者 bower install angular-w5c-validator 进行安装;

  2. 启动module引用 "w5c.validator",如: var app = angular.module("app", ["w5c.validator"]);

  3. app.config事件中配置全局属性和显示规则:

     app.config(["w5cValidatorProvider", function (w5cValidatorProvider) {
    
            // 全局配置
            w5cValidatorProvider.config({
                blurTrig   : false,
                showError  : true,
                removeError: true
    
            });
            w5cValidatorProvider.setRules({
                email   : {
                    required: "输入的邮箱地址不能为空",
                    email   : "输入邮箱地址格式不正确"
                },
                ...
            });
        }]);
  4. 在HTML模板中form上使用指令 w5c-form-validate 和 w5c-submit,w5c-form-validate指令表示该表单采用 w5cValidator的验证规则;w5c-submit 表示验证成功后调用的事件,当然w5c-submit可以不填写;

    <form class="form-horizontal w5c-form demo-form" role="form"
          w5c-form-validate="vm.validateOptions" novalidate name="validateForm">
        <div class="form-group">
            <label class="col-sm-2 control-label">邮箱</label>
    
            <div class="col-sm-10">
                <input type="email" name="email" ng-model="entity.email" required="" class="form-control"
                       placeholder="输入邮箱">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">用户名</label>
    
            <div class="col-sm-10">
                <input required="" ng-pattern="/^[A-Za-z]{1}[0-9A-Za-z_]{1,19}$/" ng-model="entity.name"
                       w5c-unique-check="{url:'http://www.ngnice.com/api/test/user/name/check?name='+entity.name}"
                       class="form-control" name="username" placeholder="输入用户名(输入why520crazy验证存在)">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">密码</label>
    
            <div class="col-sm-10">
                <input type="password" required="" ng-model="entity.password" name="password"
                       class="form-control" ng-minlength="5" ng-maxlength="15"
                       placeholder="输入密码">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">重复密码</label>
    
            <div class="col-sm-10">
                <input type="password" required="" w5c-repeat="password" ng-model="entity.repeatPassword"
                       name="repeatPassword"
                       class="form-control"
                       placeholder="重复密码">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">数字</label>
    
            <div class="col-sm-10">
                <input type="number" required="" ng-model="entity.number" name="number" class="form-control"
                       placeholder="输入数字(10-15)" max="15" min="10">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">URL</label>
    
            <div class="col-sm-10">
                <input type="url" required="" ng-model="entity.url" name="url" class="form-control"
                       placeholder="输入URL">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">类型</label>
    
            <div class="col-sm-10">
                <select class="form-control" ng-model="entity.type" required name="type"
                        ng-options="type.text for type in vm.types">
                    <option value="">---请选择---</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">多选框</label>
    
            <div class="col-sm-10">
                <select multiple class="form-control" ng-model="entity.multipleType" required name="multipleType"
                        ng-options="type.text for type in vm.types">
                    <option value="">---请选择---</option>
                </select>
            </div>
        </div>
        <div class="form-group" ng-if="vm.showDynamicElement">
            <label class="col-sm-2 control-label">动态元素</label>
    
            <div class="col-sm-10">
                <input required=""
                       class="form-control" w5c-dynamic-element ng-model="entity.dynamic" name="dynamic"
                       placeholder="动态现实元素">
            </div>
        </div>
        <div class="form-group" ng-show="validateForm.$errors.length > 0 && vm.showErrorType == 2">
            <label class="col-sm-2 control-label"></label>
    
            <div class="col-sm-10">
                <div class="alert alert-danger">
                    <ui>
                        <li ng-repeat="error in validateForm.$errors track by $index">
                            {{error}}
                        </li>
                    </ui>
                </div>
            </div>
        </div>
    
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="buttom" w5c-form-submit="vm.saveEntity()" class="btn btn-success"> 验证</button>
                <button type="buttom" ng-click="validateForm.reset()" class="btn btn-default"> 重置</button>
            </div>
    
        </div>
    </form>

#验证规则 AngularJS原生支持很多种验证规则,比如:require(必填项),email,pattern(正则),maxlength,minlength,number,url,max,min

w5cValidator提供了w5c-repeat(级联重复,常用于重复密码)和w5cUniqueCheck (远程验证,常用于检验用户名邮箱是否存在)

  1. w5cDynamicName , 让name支持表达式, <input w5c-dynamic-name="vm.dynamicName" />
  2. w5cDynamicElement 指令用于带 ng-if 或者 ng-repeat 内部的验证元素, 常常和 w5cDynamicName 配合使用

#默认提示信息

{
    required      : "该选项不能为空",
    maxlength     : "该选项输入值长度不能大于{maxlength}",
    minlength     : "该选项输入值长度不能小于{minlength}",
    email         : "输入邮件的格式不正确",
    repeat        : "两次输入不一致",
    pattern       : "该选项输入格式不正确",
    number        : "必须输入数字",
    w5cuniquecheck: "该输入值已经存在,请重新输入",
    url           : "输入URL格式不正确",
    max           : "该选项输入值不能大于{max}",
    min           : "该选项输入值不能小于{min}"

}

可以通过 w5cValidatorProvider.setDefaultRules(rule)进行设置做国际化

#注意事项:

  1. 由于验证使用的是 angular的form验证,所以必须要保证form和验证的元素都要有name属性;
  2. 如果你不想把验证成功事件w5c-submit写在 form上,可以直接在form里面的其他元素上使用w5cFormSubmit指令,如: <button type="buttom" w5c-form-submit="vm.saveEntity()" class="btn btn-success"> 验证</button>
  3. 如果你clone了代码。本地用chrome直接打开example/index.html是不可以运行的,因为我使用了$http服务去获取 js css html,所以必须要在本地搭建服务端程序,如果你有nodejs环境,运行npm install 安装module后再运行 grunt server , 如果没有grunt,用命令npm install grunt-cli -g安装, mac下需要 sudo npm install grunt-cli -g
  4. 如果你不想安装node grunt等乱七八糟的玩意,直接打开example/index-local.html 即可运行。
  5. w5cUniqueCheck默认检验是否已经存在,存在验证不通过,不存在验证通过,如果isExists设置为false表示:存在验证通过,不存在验证不通过。
  6. w5cValidatorProvider默认的错误提示信息是中文的,如果想修改成其他语言,可以通过 w5cValidatorProvider.setDefaultRules()方法设置。
  7. w5cDynamicName和w5cDynamicElement通常用于 循环创建表单元素,但是提示信息往往是一样的,默认的提示规则是按照name定义的, 所以提供了一种特殊的命名方式 {name}{$数字$}, 当匹配错误提示的时候,如果name后面带有 $数字$,会忽略这个,常用于 ng-repeat创建元素

#参数

名称 默认值 作用
blurTrig false 光标移除元素后是否验证并显示错误提示信息
showError true 可以是bool和function,每个元素验证不通过后调用该方法显示错误信息,默认true,显示错误信息在元素的后面。
removeError true 可以是bool和function,每个元素验证通过后调用该方法移除错误信息,默认true,验证通过后在元素的后面移除错误信息。

showError Function为

function showError(elem, errorMessages){
    ...
}

removeError Function为

function removeError(elem){
    ...
}

设置代码为:

 w5cValidatorProvider.config({
    blurTrig: false,
    showError: function(elem,errorMessages){
        ...
    },
    removeError: function(elem){
        ...
    }
  });

扩展方法

formName 对象是 Angular.js Form 验证 自动生成的 scope 对象,以 Form Name 命名, 包含了表单每个元素的验证情况, w5cValidator 组件主要就是基于 Angular.js 内部的验证机制追加错误提示信息而已,下面几个方法是 w5cValidator 组件扩展的变量和方法;

  1. formName.reset() 重置整个表单,包含错误信息;
  2. formName.$errors 是错误提示列表,用于统一显示错误;
  3. formName.w5cValidator.validateElement(elementName) 单独验证某个元素;
  4. formName.w5cValidator.setElementErrorMessage(elementName, errorMessage) 设置某个元素的错误信息,用户服务端返回的错误;
  5. formName.w5cValidator.doValidate() 开始触发验证,一般使用 w5c-form-submit 指令点击会自动触发验证,除非特殊情况需要使用 JS 触发才会使用到;
  6. formName.w5cValidator.removeElementValidation(elementName) 移除单个元素的验证;
  7. formName.w5cValidator.addElementValidation(elementName) 添加单个元素的验证。

以下方法请用 formName.w5cValidator.xxx 代替,即将被遗弃:

  • formName.validateElement(elemName)
  • formName.setElementErrorMessage(elemName, errorMessage)
  • formName.doValidate()

angular-w5c-validator's People

Contributors

dusdong avatar geminiyellow avatar realskyzou avatar think2011 avatar thinkif avatar why520crazy avatar wtkb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-w5c-validator's Issues

数字验证

max 能动态赋值吗,不写死最大值?

关于 checkbox 的多选

有个这样的多选 checkbox

<div class="form-group">
           <label class="col-sm-2 control-label">全国校区</label>
           <div class="col-sm-10">
               <label class="checkbox-inline" ng-repeat="campus in vm.campuses">
                   <input type="checkbox" name="campuses" ng-model="entity.campuses[campus.campusId]" ng-true-value="{{campus.campusId}}">{{campus.campusName}} 
              </label>             
           </div>
       </div>

campuses 的格式是这样的:

[
{
"campusId" : 1,
"campusName" : "北京校区"
},
{
"campusId" : 2,
"campusName" : "上海校区"
},
{
"campusId" : 3,
"campusName" : "武汉校区"
},
{
"campusId" : 4,
"campusName" : "南京校区"
},
{
"campusId" : 5,
"campusName" : "成都校区"
}
]

这样绑定:

vm.campuses = campuses;

checkbox 在点击的时候报错:

TypeError: Cannot set property '1' of undefined at extend.assign (http://localhost/hxsdWebFramework/20151117/script/angular.js:9038:26) at $setViewValue (http://localhost/hxsdWebFramework/20151117/script/angular.js:15404:7) at http://localhost/hxsdWebFramework/20151117/script/angular.js:14928:12 at Scope.$eval (http://localhost/hxsdWebFramework/20151117/script/angular.js:10699:28) at Scope.$apply (http://localhost/hxsdWebFramework/20151117/script/angular.js:10796:23) at HTMLInputElement. (http://localhost/hxsdWebFramework/20151117/script/angular.js:14927:11) at http://localhost/hxsdWebFramework/20151117/script/angular.js:2331:10 at Array.forEach (native) at forEach (http://localhost/hxsdWebFramework/20151117/script/angular.js:213:11) at HTMLInputElement.eventHandler (http://localhost/hxsdWebFramework/20151117/script/angular.js:2330:5)

请问我改如何实现 checkbox 的多选呢?

input 后面的help-block 会被删除

input 后面要带help-block进行提示,但用了 w5cValidator.js 第63行中的 $elem.next(".w5c-error").remove(); 会把所有input 后面的help-block 删除

原因是next() - Does not support selectors

https://docs.angularjs.org/api/ng/function/angular.element

解决方法将第62、63、64 行改为
var elemNext=$elem.next();
if(elemNext.hasClass('w5c-error')){
angular.forEach(elemNext,function(e){
e=angular.element(e);
if(e.hasClass('w5c-error'))e.remove();
});
}

提点建议

1.提交到bower和npm上。
2.提示内容显示方式能任意自定义,比如弹窗提示。

form校验通过后,是否应该移除所有的错误信息?

w5c-validator version: v2.4.10
Test browser: Chrome 48.0.2564.82 (64-bit)
Date: 2016/1/28

步骤

  1. 密码框输入 abcdef
  2. 重复密码框输入 abcdefg
  3. 点验证,出现“两次密码输入不一致”提示
  4. 在密码框中再输入 g,使密码框和重复密码框的内容一致
  5. 点验证,弹出success的alert框,表示校验通过,但是“两次密码输入不一致”提示仍然存在

test

poc: http://sandbox.runjs.cn/show/zhkknxb6

是否需要在校验成功后,消除form所有elem的error message?@why520crazy

element.parents 报错

指令:w5cFormSubmit 里的 代码:element.parents("form").attr("name");这样出错了,angular.element()里是没有这个parents函数的,要么就得使用jquery的parents函数

关于w5c-unique-check的问题

1、即使配置为“光标移走不触发验证”,w5c-unique-check依然会在后台发送http指令去验证是否存在该值,只不过不显示验证结果而已。

2、w5c-unique-check 是否可以配置为使用函数验证?

3、我的代码w5c-unique-check已经返回true,但依然不提示错误,找了半天没发现问题。如果可以使用函数的话,或许调试会简单一些。

4、是否有手动添加错误信息的功能?比如,当我提交后,服务器会返回错误代码,我是否可以添加错误信息到 w5c-validator 中?

谢谢~

test

Column 1 Column 2 Column 3 Column 4
No span Span across three columns

无填写提交表单时整个应用卡死掉了

在使用w5c validate,无填写提交表单时整个应用卡死掉了
求解???

                <input type="submit" w5c-form-submit="js_addUser(validateForm)"  class="btn btn-block btn-large btn-success" value="Create account">

更新了最新w5c-validator的JS出现错误了

请问,如何动态给form设置name值?

我同一个页面有多个动态生成的form,希望可以把form的name设置成变量,避免冲突。但是我尝试绑定了一下,或者在指令中去改写form,都不能影响到验证组件所获取到的name值,请问这个有没有办法解决呢?

能不能局部配置显示参数呢?

 w5cValidatorProvider.config({
            blurTrig   : false,
            showError  : true,
            removeError: true

        });

因为是单页面应用,不同页面会到不同的上面的配置,请问有办法实现吗?

能不能忽略单个文本框校验

文本框的数据是从遮罩层中获取的,然而使用该模块后,会显示的错误是Undefined的(没有报错,直接在界面上显示),我想直接忽略对这个文本框的校验,自己做校验算了

加了name通过不校验,不加name也通不过校验,不加任何校验属性也通不过校验,求教

如何定义验证提示信息

自义那种验证错误消息不应该在全局配置的,因为自定验证就是特殊的,所以消息不应该在全局的

customizer : {
customizer: "自定义验证数字必须大于上面的数字"
}
这提示消息能不能在界面写呢,全局配置会影响所有的,有时候我们往往需要影响局部的?
如下代码显示的是errMessage

  <input type="text" w5c-customizer="vm.customizer()" ng-model="vm.entity.customizer" 
 name="customizer" class="form-control" placeholder="必须输入 why520crazy"
 errMessage="自定义验证数字必须大于上面的数字">

又或者可不可以在controller上定义这个message,$scop.customizer= "自定义验证数字必须大于上面的数字",全局配置会影响所有的,有时候我们往往需要影响局部的

如下又如何实现呢?

    vm.customizer = function () {
        if(vm.entity.customizer > vm.entity.number){
        customizer: "自定义验证数字必须大于上面的数字"
        }
       return false;
    };

密码双向验证

bootstrap的这个密码验证,只设置了确认密码验证新密码,而没有设置新密码去验证确认密码的机制。假如我给新密码也绑定一个和确认密码验证的参数方法。体验很不好的说。

反正目前我看到几乎用bootstrap做的网站登录的时候,几乎没有双向绑定的,当我输完确认密码,返回去改编新密码,不会触发确认密码框的再次校验,然后验证都是通过的,ok神奇的事情出现了,没有后台验证的直接提示注册成功了

修正个bug

在某些不是基于textarea开发的文本编辑器中,按回车会自动提交。
修改了下
if (ctrl.needBindKeydown) { form.bind("keydown keypress", function (event) { if (event.which === 13) { var currentInput = document.activeElement; if (currentInput.type&&currentInput.type !== "textarea") {

增加currentInput.type&&判断,就不会自动提交表单了。

想点击submit只弹出首个需要的提示信息

插件挺好的,很想用,但不知道可不可以实现点击submit按钮,只弹出首个错误输入的输入框的提示,
还有就是如何调用表单中个别项是否验证成功。如果可以是否可以提供个demo 谢谢

如何配置非全局的验证

如何配置局部的验证?好像例子都是配置全局验证的,能支持局部验证吗?就是我提交表单之后,在提交方法上去做验证

repeat password 验证出现undefined

密码:
            <div class="col-md-5 col-md-pad"><input type="password" required="" ng-model="member.pass" name="password" class="form-control" required="" placeholder="密码" ng-minlength="4" ng-maxlength="12"/></div>
        </div>
        <div class="form-group row">
            <div class="col-md-3 col-md-3-mid"><label class="label_rig">确认密码:</label></div>
            <div class="col-md-5 col-md-pad"><input type="password" name="repeatPassword" w5c-repeat="password" class="form-control" ng-model="member.confirmPass" required="" placeholder="确认密码"/>
            </div>
        </div>

html代码如上,先输确认密码1234,再输密码1234,就会出现undefined

如何验证ng-repeat 中的表单元素

您好,我最近做一个项目想使用你的angular-w5c-validator插件。遇到一个问题,希望能得到您的帮助。
我的代码结构是:

<form  w5c-form-validate="vm.validateOptions" novalidate name="validateForm" w5c-submit="abc()">
    <table>
        <tr ng-repeat="d in data">
            <td>
                <span ng-if="d.isEdit"><input name="name" w5c-dynamic-element required ng-model="d.name" ></span>
                <span ng-if="!d.isEdit">{{d.name}}</span>
            </td>
        </tr>
    </table>
</form>

双击任何一行会进入编辑状态,并且同时只有一行会处在编辑状态。
现在我用

$scope.validateForm.doValidate()

触发验证,并查询

$scope.validateForm.$valid

可以返回正确的验证结果,但是并不能触发您的插件中 showError 的方法,请问现在有没有办法实现呢?谢谢

可不可以给不同表单单独设置不同的提示信息

w5cValidatorProvider.setRules({
email : {
required: "输入的邮箱地址不能为空",
email : "输入邮箱地址格式不正确"
},
username : {
required : "输入的用户名不能为空",
pattern : "用户名必须输入字母、数字、下划线,以字母开头",
w5cuniquecheck: "输入用户名已经存在,请重新输入"
},
password : {
required : "密码不能为空",
minlength: "密码长度不能小于{minlength}",
maxlength: "密码长度不能大于{maxlength}"
},
repeatPassword: {
required: "重复密码不能为空",
repeat : "两次密码输入不一致"
},
number : {
required: "数字不能为空"
},
customizer : {
customizer: "自定义验证数字必须大于上面的数字"
}
});
这是全局的,
我想让单独的表单显示不同的提示信息, 这个怎么弄,

如何自定义验证的消息

如何自定义验证的消息,如下能不能在界面上定义一个属性,填写错误消息,没有errMessage这个属性的就按默认消息显示

是否支持 i18n

感谢您的模块。
现在所有的信息模板都是在config中预先写好,
如果需要支持i18n的话,请问如何实现。

错误 $$animateJs is not a function

TypeError: $$animateJs is not a function
angular.module("w5c.validator", ["ng"]) 请问这里的依赖 ng 是什么?我在不使用ng模块的时候,程序不报错,但是验证表单不会工作, 如果我加上依赖模块会抛出 $$animateJs is not a function 的错误

TypeError: Cannot set property '$errors' of undefined

TypeError: Cannot set property '$errors' of undefined
at Object.fn (w5cValidator.min.js:2)
at n.$get.n.$digest (angular.js:15685)
at n.$get.n.$apply (angular.js:15953)
at controller.doValidate (w5cValidator.min.js:2)
at HTMLInputElement. (w5cValidator.min.js:2)
at HTMLInputElement.c (angular.js:3273)

提示位置缺乏灵活性

https://github.com/why520crazy/angular-w5c-validator/blob/master/src/w5cValidator.js#L41

有些情况,不是把错误插入到input的后面的,例如用bootstrap,有个视图是如:

<div class="input-group">
    <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
    <input name="name" type="text" class="form-control input-lg" placeholder="用户名/邮箱" ng-model="user.name" auto-focus="">
</div>

那么,理论提示位置应该在input-group 后面,而不是input后面,否则样式被弄乱。

求助自定义验证在controller下赋值提示消息

求助自定义验证在controller下提示消息,因为全局验证我们在平台的,所以子项目不可能修改的,怎么办?
在controller上定义这个message,$scop.customizer= "自定义验证数字必须大于上面的数字"

如下又如何实现呢?

vm.customizer = function () {
    if(vm.entity.customizer > vm.entity.number){
    customizer: "自定义验证数字必须大于上面的数字"
    }
   return false;
};

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.