本例通过Angular框架来实现简单的表单验证
一、html结构
1、借助于bootstrap快速的编写了一个简单的表单
代码主要部分如下：
<div ng-controller="myCtrl"> <h1>用户表单提交</h1> <form action="upload.js"> <div> <label for="username">用户名</label> <div> <input type="text" autocomplete="false" placeholder="用户名" ng-model="data.username" required> <div > 用户名长度不能小于5位 </div> <div > 用户名长度不能大于15位 </div> </div> </div> </form> </div>
2、表单验证常见问题及指令
1）、问题：
》如何绑定数据——双向绑定
》验证表单——正则表达式
》显示错误信息
》整个Form的验证
》避免提交没通过验证的表单
》防止多次提交
2）、常用指令
》指令：
ng-model,ng-required,ng-pattern,ng-maxlength,ng-minlength,ng-change
》样式：
ng-valid,ng-invalid,ng-pristine,ng-dirty
》form控制变量
formName.inputFieldName.$error:字段错误信息
formName.inputFieldName.$dirty:字段是否修改
formName.inputFieldName.$pristine:字段是否是初始状态
formName.inputFieldName.$valid:字段是否有效
formName.inputFieldName.$invalid:字段是否无效
二、功能实现
2.1 用户名验证
用户输入用户名字段验证主要是长度验证，以及是否必须
1、ng-model绑定表单数据，以便使用angular的验证api
2、ng-minlength,ng-maxlength规定字段长段，required规定字段必填
3、错误提示信息通过formName.inputFieldName.$error.minlength/maxlength决定是否要显示，当输入不合法时，$error对应的错误信息会为true
如下：
<div> <label for="username">用户名</label> <div> <input type="text" autocomplete="false" placeholder="用户名" ng-model="data.username" ng-minlength="5" ng-maxlength="15" required> <div ng-show="myForm.username.$error.minlength"> 用户名长度不能小于5位 </div> <div ng-show="myForm.username.$error.maxlength"> 用户名长度不能大于15位 </div> </div> </div>
2.2 密码确认验证
用户密码确认验证需要保证两次输入的密码一致，且在未输入确认密码前不验证
1、绑定数据ng-model=data.pwdConfirm（所有表单数据都保存到data对象中）
2、通过判断data.pwdConfirm!==data.password确定两次密码是否输入一致
3、通过formName.inputField.$dirty确定此项是否填写过
<div> <label>确认密码</label> <div> <input type="password" ng-model="data.pwdConfirm" placeholder="确认密码" required> <div ng-show="data.pwdConfirm!==data.password&&myForm.pwd.$dirty"> 两次输入的密码不一致 </div> </div> </div>
2.3 邮箱验证
邮箱验证主要验证邮箱格式是否正确，字段长度
1、使用H5中新增type属性值email作为
2、通过ng-pattern指令定义邮箱验证的正则
3、邮箱验证常用正则表达式：^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+
4、通过myForm.email.$error.pattern验证邮箱格式是否正确
<div> <label>邮箱</label> <div> <input type="email" ng-model="data.email" placeholder="邮箱" required ng-pattern="/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/"> <div ng-show="myForm.email.$error.minlength"> 邮箱长度不能小于5位 </div> <div ng-show="myForm.email.$error.pattern"> 请填写正确的邮箱格式 </div> <div ng-show="myForm.email.$error.maxlength"> 邮箱长度不能大于30位 </div> </div> </div>
2.4 单复选框
单复选框主要确定数据绑定问题，以及复选框的数据渲染
1、通过以data对象的属性形式来绑定数据
2、多选的选项值通过ng-repeat进行遍历
3、设置value值以便提交时对值进行区分
<div> <label>性别</label> <div> <label> <input type="radio" value="1" ng-model="data.sex" />男 </label> <label> <input type="radio" value="0" ng-model="data.sex" />女 </label> </div> </div> <div> <label>爱好</label> <div> <label ng-repeat="hobby in hobbies"> <input type="checkbox" ng-model="hobbiesC" value="{{hobby.id}}" /> {{hobby.name}} </label> </div> </div> <div> <input type="reset" value="重置"> <input type="submit" value="提交"> </div>
2.5 城市二级联动