zoukankan      html  css  js  c++  java
  • 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指令基于表单的合法性来启用或禁用按钮。

  • 相关阅读:
    Codeforces Round #609 (Div. 1)
    Codeforces Round #607 (Div. 1)
    Codeforces Round #604 (Div. 1)
    网络流应用
    javaScript遍历数组总结
    JavaScript遍历对象的常见方法
    JS中的可枚举属性与不可枚举属性
    typeScript泛型
    ts中函数重载声明
    ts中的可选参数
  • 原文地址:https://www.cnblogs.com/codebook/p/10888256.html
Copyright © 2011-2022 走看看