我知道这个问题很老了,我也知道你不想用指令,但你可能会考虑使用指令,如果它是“Angular”的方式...好吧,这是我的
Angular-Validation。 我在Github上做了一个项目,我认为它比任何可用的东西都好......我以优秀的Laravel PHP框架为基础,在Angular下提供它......它非常简单,你只需要
两行 一行代码、一行输入,
一行错误显示,就这样了......从此不再多谈,让我们来举些例子:
<!
<label for="input1">Email</label>
<input type="text" validation="email|min_len:3|max_len:25|required" ng-model="form1.input1" name="input1" />
<!
<label for="input2">Alphanumeric + Exact(3) + required</label>
<input type="text" validation="alpha|exact_len:3|required" ng-model="form1.input2" name="input2" />
所以,我可以在一个简单的指令
validation="min_len:2|max_len:10|required|integer"
中定义任意数量的验证规则(已有25种以上的验证器),错误消息将始终显示在下一个
<span>
中。你们喜欢这个想法吗?只需一行代码即可输入,一行代码即可显示错误信息,再也没有比这更简单的了...哦,如果您想添加自定义正则表达式,我甚至还支持它。另外一个好处是,我还支持任何您想要的触发事件,最常见的可能是
onblur
和
onkeyup
。哦,我还通过JSON外部文件支持多种本地化语言。我真的把我想到的所有功能都加入到了一个疯狂简单的指令中。
不再需要为一个输入框编写10行代码的混乱表单(对不起,但我总觉得那有点过分),即使对于一个带有5个验证器的输入框,您只需要两行代码就可以搞定。而且,不用担心表单无效,我已经处理好了,这都是“Angular”的好方法。
请查看我的Github项目
Angular-Validation……我相信你会喜欢的=)
更新
另一个惊喜奖励!为了使用户体验更加流畅,我添加了计时器验证。这个概念很简单,不要在用户输入时打扰他,但如果他暂停或更改输入(onBlur),则进行验证……你喜欢吗?
您甚至可以按照自己的喜好自定义计时器,我已经在指令中将其默认为1秒,但如果您想自定义,您可以调用例如
typing-limit="5000"
来设置5秒超时。完整示例:
<input type="text" ng-model="form1.input1" typing-limit="5000" validation="integer|required" name="input1" />
<span class="validation text-danger"></span>
更新 #2
还添加了输入匹配确认验证(例如:密码确认),这里是示例代码。
<!-- input match confirmation, as for example: password confirmation -->
<label for="input4">Password</label>
<input type="password" name="input4" ng-model="form1.input4" validation="alpha|min_len:4|required" />
<label for="input4c">Password Confirmation</label>
<input type="password" name="input4c" ng-model="form1.input4c" validation="match:form1.input4,Password|required" />
更新 #3
重构指令,使得不需要使用<span>
来显示错误信息,指令现在可以自主处理错误信息的显示,详见上方代码更改。
演示
在Plunker中添加了实时演示。