整理项目中用到的angularjs--form表单验证

form表单验证概述

• novalidate -- 屏蔽浏览器对表单的默认验证行为

• ng-model -- 绑定的数据

• ng-required -- 是否必填（可以控制是否是不填校验）

• required -- 必填（页面加载的时候就会自动验证 == true）

• ng-minlength -- 最小长度

• ng-maxlength -- 最大长度

• ng-pattern -- 匹配模式（正则）

• email -- 邮箱

• url -- 网址

• number -- 数字

• ng-change -- 值变化的回调

在表单中控制变量

• formName.inputField.$pristine 字段是否 未更改

• formName.inputField.$dirty 字段是否 更改

• formName.inputField.$valid 字段是否 有效

• formName.inputField.$invalid 字段是否 无效

• formName.inputField.$error 字段 错误信息

 

一些有用的CSS样式

• ng-valid //有效时的样式名
• ng-invalid //无效时的样式名
• ng-pristine //未更改的样式名
• ng-dirty //更改后的样式名
• ng-submitted //提交后的样式名.当用户试图提交表单时,可以在作用域中捕获到一个submitted值，然后对表单内容进行验证并显示错误信息

　　例如：

　　　　　　input.ng-invalid {

　　　　　　　　border: 1px solid red;

　　　　　　}

　　　　　　input.ng-valid {　　

　　　　　　　　border: 1px solid green;

　　　　　　}

form表单示例

 <!--注册表单-->
    <form class="zhucezhuti"  novalidate>
        <div class="mb-15 distab marcenter">
            <input class="querenyong" type="email"  required>
            <span class="errorSty" ng-show="myForm.UserEmail.$dirty && myForm.UserEmail.$invalid && myForm.submitted">
                <span ng-show="myForm.UserEmail.$error.required">*请输入邮箱</span>
                <span ng-show="myForm.UserEmail.$error.email">*非法的邮箱地址。</span>
            </span>
            <span class="eSsuccess"></span>
        </div>
        <div class="mb-15 distab marcenter">
            <div class="distab">
                <input class="yanzhengma" type="number"  required>
                <input class="huoquyan" type="button"  />
            </div>
            <span class="errorSty" ng-show="myForm.yzm.$dirty && myForm.yzm.$invalid && myForm.submitted">
                <span ng-show="myForm.yzm.$error.required">*请输入验证码。</span>
                <span ng-show="myForm.yzm.$error.number">*请输入正确的验证码。</span>
            </span>
        </div>
        <div class="mb-15 distab marcenter">
            <input class="querenyong" type="password" name="password"  required>
            <span class="errorSty" ng-show="myForm.password.$dirty && myForm.password.$invalid && myForm.submitted">
                <span ng-show="myForm.password.$error.required">*密码是必须的。</span>
                <span ng-show="myForm.password.$error.minlength">*密码不少于6位。</span>
                <span ng-show="myForm.password.$error.maxlength">*密码不多于16位。</span>
            </span>
        </div>
        <div class="mb-15 distab marcenter">
            <input class="querenyong" type="password" name="confirmPassword"  required>
            <span class="errorSty" ng-show="myForm.confirmPassword.$dirty && myForm.confirmPassword.$invalid && myForm.submitted">
                <span ng-show="myForm.confirmPassword.$error.required">*确认密码必填。</span>
                <span ng-show="!myForm.confirmPassword.$pristine && myForm.confirmPassword.$invalid">*预设密码和确认密码不一致。</span>
            </span>
        </div>
        <div class="tiaokuan mb-15">
            <input class="fuxuan" ng-model="Iagree" type="checkbox" required>&nbsp;&nbsp;<font class="yuedu">请务必仔细阅读并同意&nbsp;<a href="javascript:void(0)" onclick="showTanc('tanc','closethis')">网站使用条款</a>&nbsp;和&nbsp;<a href="javascript:void(0)" onclick="showTanc('tanc1','closethis')">电子金融交易使用条款&nbsp;</a></font>

            <span class="errorSty" ng-show="myForm.Iagree.$invalid && myForm.submitted">
                <span ng-show="myForm.Iagree.$error.required">*您未同意条款。</span>
            </span>
        </div>
        <input class="zhucedenglu" type="submit" value="注册" ng-disabled="!myForm.$dirty">
    </form>

HTML代码