angular1 表单验证demo

这是一个angular1 验证表单的小栗子：

先看代码：

<div ng-controller="myController">
        <form name="signup_form" novalidateng-submit="signupForm()">
            <fieldset>
                <legend>注册</legend>
                <div class="row">
                    <div class="large-12 columns">
                        <label>姓名：</label>
                        <input type="text" placeholder="姓名" name="name" ng-model="signup.name" ng-minlength="3" ng-maxlength="20" required />
                        <div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$invalid">
                            <small class="error"
                             ng-show="signup_form.name.$error.required">
                             姓名不能为空
                             </small>
                            <small class="error"
                             ng-show="signup_form.name.$error.minlength">
                             姓名长度至少3个字符
                             </small>
                            <small class="error"
                             ng-show="signup_form.name.$error.maxlength">
                             姓名长度不能超过20个字符
                             </small>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="large-12 columns">
                        <label>邮箱：</label>
                        <input type="email" placeholder="邮箱" name="email" ng-model="signup.email" required />
                        <div class="error" ng-show="signup_form.email.$dirty && signup_form.email.$invalid">
                            <small class="error"
                             ng-show="signup_form.email.$error.required">
                            邮箱是必须的
                             </small>
                            <small class="error"
                             ng-show="signup_form.email.$error.email">
                            非法邮箱
                             </small>
                        </div>
                    </div>
                </div>
                <button type="submit" class="button radius" ng-disabled="signup_form.$invalid">Submit</button>
            </fieldset>
        </form>
    </div>

注意：

这个表单的名称是signup_form，当表单提交时我们要调用signupForm()，用ng-disabled指令基于表单的合法性来启用或禁用按钮。