angular表单验证

先告知一下angular可以做任何的表单验证，需要form标签但并不是用的form默认提交方式，而是通过自定义ajax提交。提交按钮可以在form标签外。

 <form name="loginSubmit">
    <!--用户名为手机号或邮箱，因为angular没有这个验证，所以自定义正则-->
    <div class="form-group">
        <input name="username"
               ng-model="userdata.username"
               required
               autocomplete="off"
               ng-pattern="/(^1[0-9]{10}$)|(^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$)/"
               ng-blur="checkName()"
               type="text" class="form-control" placeholder="手机号/邮箱">
        <p class="text-danger" ng-if="(loginSubmit.username.$error.required && loginSubmit.username.$touched) || userCheck.buzCode == '20'">不能为空</p>
        <p class="text-danger" ng-if="(loginSubmit.username.$error.pattern && loginSubmit.username.$touched)||  userCheck.buzCode == '22'||  userCheck.buzCode == '30'||  userCheck.buzCode == '31'">请输入正确的手机号或邮箱</p>
        <!--<p>请输入正确的邮箱或手机号</p>-->
    </div>
    <!--密码6-16位-->
    <div class="form-group">
        <input name="password"
               ng-model="userdata.password"
               ng-minlength="6"
               ng-maxlength="16"
               type="password" class="form-control" placeholder="输入密码" required>
        <p class="text-danger" ng-if="loginSubmit.password.$error.required && loginSubmit.password.$touched">不能为空</p>
        <p class="text-danger" ng-if="(loginSubmit.password.$error.minlength || loginSubmit.password.$error.maxlength) && loginSubmit.password.$touched " >长度6~16位之间</p>
    </div>
    <!--是否需要图形验证码-->
    <div class="form-group" ng-if="userCheck.buzCode == '40'">
       <input name="captcha" ng-model="userdata.captcha" type="text" autocomplete="off" class="form-control captcha" placeholder="输入图形验证码" required>![](captcha)
        <p class="text-danger" ng-if="loginSubmit.captcha.$error.required && loginSubmit.captcha.$touched">不能为空</p>
    </div>
    <button type="button" ng-disabled="loginSubmit.$invalid" ng-click="login_submit()" class="btn btn-primary">登 录</button>
 </form>

1. 首先必须给form加一个name，我们在后面通过这个name来判断这个form表单是否验证通过或未通过(即下面button内的ng-disabled属性，当其值为真时，ng-click有效。可以通过ng-click触发ajax提交)。当全部通过时loginSubmit.$invalid的值为假，此时该按钮的ng-click激活
2. 其次对于angular没有内置规则的，可以通过自己写正则来验证，ng-pattern=reg
3. 至于文本提示信息，通过ng-if来决定是否渲染
4. 另外像图形验证码可能一开始并不显示，而是在用户登录失败几次之后，根据后台返回的值来判断用户需要输入图形验证码，这时候需要图像验证码显示，这里如果用ng-show来做显示隐藏是不正确的，因为angular在表单隐藏时也依然会进行验证，这里我们应该用ng-if。需要提一下ng-if与ng-show的区别，ng-show情况相当于元素hidden，虽然看不到，但是仍然存在。而ng-if只有为真是才会将元素追加加来。