AngularJS表单验证--输入框

AngularJS作为下一代的Web应用开发的框架,表单验证的方式与JQuery/JS截然不同,总之,更加简洁更加简单。

基本结构

HTML代码

AngularJS基本结构


  

实现方式

  1. form添加属性name。最好同时加上novalidate属性(用于禁用H5默认自带的验证)。
  
...
  1. input添加ng-model,绑定的变量test,用于后面的验证。

  1. input添加验证属性required和验证指令ng-minlengthng-maxlength以及ng-pattern。同时,对应添加相关的提示信息。

    
该输入项不能为空
输入长度不能小于6
输入长度不能大于10
必须输入汉字
  1. 为了防止用户未输入就提交,在按钮添加禁用指令,当表单完全验证通过才能提交。

代码说明:

代码 说明
testForm 表单名
test 输入框绑定的变量
$dirty 表单变量是否修改
$invalid 表单变量验证是否未通过
$error.required 表单变量是否没填写
$error.minlength 表单变量是否少于最小长度
$error.maxlength 表单变量是否超出最大长度
$error.pattern 表单变量是否不满足正则表达式
  • 点击查看完整代码

如有任何疑问,欢迎下面留言

你可能感兴趣的:(AngularJS表单验证--输入框)