本例通过角框架来实现简单的表单验证
<强>一、html结构
1,借助于引导快速的编写了一个简单的表单
代码主要部分如下:,
& lt; div类="容器" ng-controller=癿yCtrl”比;
& lt; h2的在用户表单提交& lt;/h2>
action=& lt;形式”上传。js”class=" form-horizontal myForm“name=比;
祝辞& lt; div class="形式的班级”;
& lt;标签="用户名" class=" col-sm-3 control-label”在用户名& lt;/label>
& lt; div类=癱ol-sm-9”比;
& lt;输入类型=拔谋尽弊远瓿?癴alse”name="用户名"占位符=坝没皀g-model="数据。用户名" id="用户名" class="表单控件”required>
& lt; div class="警报alert-danger有助于阻止“比;
用户名长度不能小于5位
& lt;/div>
& lt; div class="警报alert-danger有助于阻止“比;
用户名长度不能大于15位
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/form>
& lt;/div>
之前
2,表单验证常见问题及指令
1),问题:
》如何绑定数据——双向绑定
》验证表单——正则表达式
》显示错误信息
》整个形式的验证
》避免提交没通过验证的表单
》防止多次提交
2),常用指令
》指令:
》样式:
》形式控制变量
formName.inputFieldName。错误:美元字段错误信息
formName.inputFieldName。$脏:字段是否修改
formName.inputFieldName。$原始:字段是否是初始状态
formName.inputFieldName。美元有效:字段是否有效
formName.inputFieldName。$无效:字段是否无效
<强>二、功能实现
2.1用户名验证
用户输入用户名字段验证主要是长度验证,以及是否必须
1, ng-model绑定表单数据,以便使用角的验证api
2 ng-minlength ng-maxlength规定字段长段,要求规定字段必填
3,错误提示信息通过formName.inputFieldName。美元的错误。最小长度/最大长度决定是否要显示,当输入不合法时,美元的误差对应的错误信息会为真正的
如下:
祝辞& lt; div class="形式的班级”;
& lt;标签="用户名" class=" col-sm-3 control-label”在用户名& lt;/label>
& lt; div类=癱ol-sm-9”比;
& lt;输入类型=拔谋尽弊远瓿?癴alse”name="用户名"占位符=坝没皀g-model="数据。用户名" id="用户名" ng-minlength=" 5 " ng-maxlength=" 15 " class="表单控件”required>
& lt; div class="警报alert-danger有助于阻止“ng-show=癿yForm.username error.minlength美元。”比;
用户名长度不能小于5位
& lt;/div>
& lt; div class="警报alert-danger有助于阻止“ng-show=癿yForm.username error.maxlength美元。”比;
用户名长度不能大于15位
& lt;/div>
& lt;/div>
& lt;/div>
之前
2.2密码确认验证
用户密码确认验证需要保证两次输入的密码一致,且在未输入确认密码前不验证
1,绑定数据ng-model=数据。pwdConfirm(所有表单数据都保存到数据对象中)
2,通过判断data.pwdConfirm !==数据。密码确定两次密码是否输入一致
3,通过formName.inputField。美元脏确定此项是否填写过
祝辞& lt; div class="形式的班级”;
& lt;标签类=" col-sm-3 control-label”祝辞确认密码& lt;/label>
& lt; div类=癱ol-sm-9”比;
& lt;输入类型="密码" name=" pwdConfirm " ng-model="数据。pwdConfirm "占位符="确认密码" id=" pwdConfirm“required class="表单控件”比;
& lt; div类="警报alert-danger " ng-show=癲ata.pwdConfirm !==data.password& myForm.pwd。美元脏”比;
两次输入的密码不一致
& lt;/div>
& lt;/div>
& lt;/div>
之前
2.3邮箱验证
邮箱验证主要验证邮箱格式是否正确,字段长度
1,使用H5中新增类型属性值电子邮件作为
2,通过ng-pattern指令定义邮箱验证的正则
3、邮箱验证常用正则表达式:^ ([a-zA-Z0-9_ -]) + @ ([a-zA-Z0-9_ -]) + ([a-zA-Z0-9_ -]) +
4,通过myForm.email。美元的错误。模式验证邮箱格式是否正确
祝辞& lt; div class="形式的班级”;
& lt;标签类=" col-sm-3 control-label”祝辞邮箱& lt;/label>
& lt; div类=癱ol-sm-9”比;
& lt;输入类型="电子邮件" name="电子邮件" ng-model="数据。电子邮件"占位符="邮箱”class="表单控件“要求ng-pattern="/^ ([a-zA-Z0-9_ -]) + @ ([a-zA-Z0-9_ -]) + ([a-zA-Z0-9_ -]) +/北?
& lt; div class="警报alert-danger有助于阻止“ng-show=癿yForm.email error.minlength美元。”比;
邮箱长度不能小于5位
& lt;/div>
& lt; div class="警报alert-danger有助于阻止“ng-show=癿yForm.email error.pattern美元。”比;
请填写正确的邮箱格式
& lt;/div>
& lt; div class="警报alert-danger有助于阻止“ng-show=癿yForm.email error.maxlength美元。”比;
邮箱长度不能大于30位
& lt;/div>
& lt;/div>
& lt;/div>
