Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

表单认证 #13

Open
Wscats opened this issue Aug 16, 2016 · 0 comments
Open

表单认证 #13

Wscats opened this issue Aug 16, 2016 · 0 comments

Comments

@Wscats
Copy link
Owner

Wscats commented Aug 16, 2016

注意点
1.要让form.user.$error.required生效,必须在输入框加入H5的属性required
2.form.email.$dirty加了这句话可以让第一次进入页面的时候不提示用户名/邮箱是必须的,等有输入并输入框为空后再出现提醒
3.form表单的属性name="user"对应form.user中的form,input输入框的属性name="user"对应form.user中的user
4.<input type="submit" ng-disabled="form.user.$dirty && form.user.$invalid || form.email.$dirty && form.email.$invalid">表示有输入并且输入的名字是非法内容和有输入并且输入的邮箱是非法内容这两种情况只要满足其中一种就让按钮禁止使用

  • $dirty 表单有填写记录 也就是说表单在进入页面前是没有任何填写纪录的,一旦我们做来第一次输入之后,后面这个都判断为是有过填写记录
  • $valid 字段内容合法的
  • $invalid 字段内容是非法的 如果输入框为空那就属于非法的
  • $pristine 表单没有填写记录
<!DOCTYPE html>
<html ng-app="wsscat">
    <head>
        <meta charset="UTF-8">
        <title>wsscat表单认证</title>
    </head>
    <style>
        span {
            color: red;
        }
    </style>

    <body ng-controller="indexCtrl">
        <form name="form">
            <p>
                <input type="text" name="user" ng-model="user" required />
                <!--
                    $dirty      表单有填写记录   也就是说表单在进入页面前是没有任何填写纪录的,一旦我们做来第一次输入之后,后面这个都判断为是有过填写记录
                    $valid      字段内容合法的
                    $invalid        字段内容是非法的 如果输入框为空那就属于非法的
                    $pristine   表单没有填写记录
                -->

                <!--这里做了严谨的判断 第一个是让它进来的时候判断它是否已经输入过内容如果没输入就隐藏用户名必须这个红色输入框,第二个是判断非法字符-->
                <span ng-show="form.user.$dirty&&form.user.$invalid">
                    <span ng-show="form.user.$error.required">用户名是必须</span>
                </span>
            </p>
            <p>
                <input type="email" name="email" ng-model="email" required />
                <span ng-show="form.email.$dirty && form.email.$invalid">
                    <span ng-show="form.email.$error.required">邮箱是必须的</span>
                <span ng-show="form.email.$error.email">非法的邮箱地址</span>
                </span>
            </p>
            <p>
                <!--有输入并且输入的是非法内容,有输入并且输入的邮箱是非法内容-->
                <input type="submit" ng-disabled="form.user.$dirty && form.user.$invalid ||  
                form.email.$dirty && form.email.$invalid">
            </p>
        </form>
    </body>
    <script type="text/javascript" src="../js/angular.js"></script>
    <script>
        var app = angular.module('wsscat', []);
        app.controller('indexCtrl', function($scope) {})
    </script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant