AngularJS表单验证操作例子分享

<!--form.html-->
<!DOCTYPE html>
<html ng-app="firstMoudule" lang="zh-CN">

<head>
    <meta charset=‘utf-8‘>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">
    <link rel="stylesheet" href="../CSS/style.css">
</head>

<body>
    <div class="container" ng-controller="firstController">
        <form class="form-horizontal" name="myForm">
            <div class="form-group" ng-class="{‘has-warning‘:(myForm.username.$error.minlength||myForm.username.$error.maxlength||myForm.username.$error.required && myForm.username.$dirty),‘has-success‘:((!myForm.username.$error.minlength)&&(!myForm.username.$error.required)&&(!myForm.username.$error.maxlength))}">
                <label for="inputUsername" class="col-sm-4 control-label">Your Username</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="inputUsername" placeholder="Your Username" autocomplete="false" ng-required="true" ng-model="data.username" name="username" ng-minlength="6" ng-maxlength="20">
                </div>
                <div ng-show="myForm.username.$error.minlength||myForm.username.$error.maxlength||myForm.username.$error.required&&myForm.username.$dirty" class="col-sm-1 info-block"><span class="glyphicon glyphicon-remove"></span></div>
                <div ng-show="(!myForm.username.$error.minlength)&&(!myForm.username.$error.required)&&(!myForm.username.$error.maxlength)" class="col-sm-1 info-block"><span class="glyphicon glyphicon-ok"></span></div>
            </div>
            <div class="form-group" ng-class="{‘has-warning‘:(myForm.email.$error.email||myForm.email.$error.required&&myForm.email.$dirty),‘has-success‘:((!myForm.email.$error.email)&&(!myForm.email.$error.required))}">
                <label for="inputEmail3" class="col-sm-4 control-label">Your Email</label>
                <div class="col-sm-4">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Your Email" autocomplete="false" ng-required="true" ng-model="data.email" name="email">
                </div>
                <div ng-show="myForm.email.$error.email||myForm.email.$error.required&&myForm.email.$dirty" class="col-sm-1 info-block"><span class="glyphicon glyphicon-remove"></span></div>
                <div ng-show="(!myForm.email.$error.email) && (!myForm.email.$error.required)" class="col-sm-1 info-block"><span class="glyphicon glyphicon-ok"></span></div>
            </div>
            <div class="form-group" ng-class="{‘has-warning‘:(myForm.password.$error.pattern||myForm.password.$error.required&&myForm.password.$dirty),‘has-success‘:((!myForm.password.$error.pattern)&&(!myForm.password.$error.required))}">
                <label for="inputPassword" class="col-sm-4 control-label">Your Password</label>
                <div class="col-sm-4">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Your Password" ng-pattern="/^\w{6,18}$/" ng-required="true" ng-model="data.password" name="password">
                </div>
                <div ng-show="myForm.password.$error.pattern||myForm.password.$error.required&&myForm.password.$dirty" class="col-sm-1 info-block"><span class="glyphicon glyphicon-remove"></span></div>
                <div ng-show="(!myForm.password.$error.pattern)&&(!myForm.password.$error.required)" class="col-sm-1 info-block"><span class="glyphicon glyphicon-ok"></span></div>
            </div>
            <div class="form-group" ng-class="{‘has-warning‘:(data.passwordRe!==data.password||myForm.passwordRe.$error.required&&myForm.passwordRe.$dirty),‘has-success‘:(data.passwordRe===data.password&&(!myForm.passwordRe.$error.required))}">
                <label for="inputPasswordRe" class="col-sm-4 control-label">Repeat Password</label>
                <div class="col-sm-4">
                    <input type="password" class="form-control" id="inputPasswordRe" placeholder="Repeat Password" ng-required="true" ng-model="data.passwordRe" name="passwordRe">
                </div>
                <div ng-show="data.passwordRe!==data.password||myForm.passwordRe.$error.required&&myForm.passwordRe.$dirty" class="col-sm-1 info-block"><span class="glyphicon glyphicon-remove"></span></div>
                <div ng-show="data.passwordRe===data.password&&(!myForm.passwordRe.$error.required)" class="col-sm-1 info-block"><span class="glyphicon glyphicon-ok"></span></div>
            </div>
            <div class="form-group" ng-class="{‘has-warning‘:(myForm.site.$error.url||myForm.site.$error.required&&myForm.site.$dirty),‘has-success‘:((!myForm.site.$error.email)&&(!myForm.site.$error.required))}">
                <label for="inputSite" class="col-sm-4 control-label">Your Site</label>
                <div class="col-sm-4">
                    <input type="url" class="form-control" id="inputSite" placeholder="Your Site" autocomplete="false" ng-required="true" ng-model="data.site" name="site">
                </div>
                <div ng-show="myForm.site.$error.email||myForm.site.$error.required&&myForm.site.$dirty" class="col-sm-1 info-block"><span class="glyphicon glyphicon-remove"></span></div>
                <div ng-show="(!myForm.site.$error.url) && (!myForm.site.$error.required)" class="col-sm-1 info-block"><span class="glyphicon glyphicon-ok"></span></div>
            </div>
            <div class="form-group" ng-class="{‘has-warning‘:(myForm.age.$error.min||myForm.age.$error.max||myForm.age.$error.required&&myForm.age.$dirty),‘has-success‘:((!myForm.age.$error.min)&&(!myForm.age.$error.required)&&(!myForm.age.$error.max))}">
                <label for="inputAge" class="col-sm-4 control-label">Your Age</label>
                <div class="col-sm-4">
                    <input type="number" class="form-control" id="inputAge" placeholder="Your Age" autocomplete="false" ng-required="true" ng-model="data.age" name="age" max="120" min="18">
                </div>
                <div ng-show="(myForm.age.$error.min||myForm.age.$error.max||myForm.age.$error.required&&myForm.age.$dirty)" class="col-sm-1 info-block"><span class="glyphicon glyphicon-remove"></span></div>
                <div ng-show="((!myForm.age.$error.min)&&(!myForm.age.$error.required)&&(!myForm.age.$error.max))" class="col-sm-1 info-block"><span class="glyphicon glyphicon-ok"></span></div>
            </div>
            <div class="form-group">
                <label for="inputSex" class="col-sm-4 control-label">Your Sex</label>
                <div class="col-sm-4">
                    <label class="radio-inline">
                        <input type="radio" name="sex" value="1" ng-model="data.sex">male
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="sex" value="0" ng-model="data.sex">female
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label for="inputHobby" class="col-sm-4 control-label">Your Hobby</label>
                <div class="col-sm-4">
                    <label class="checkbox-inline" ng-repeat="hobby in hobbies">
                        <input type="checkbox" name="hobby" value="hobby.id" ng-click="toggleHobbySelection(hobby.id)" ng-checked="hobbyData.hobbies.indexOf(hobby.id)!==-1">{{hobby.name}}
                    </label>
                </div>
            </div>
        </form>
    </div>
    <script src="http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"></script>
    <script src="../JS/controllers.js"></script>
</body>

</html>
/*style.css*/

.container {
    margin-top: 40px;
}

.glyphicon {
    padding-top: 8px;
}

.glyphicon-remove {
    color: red;
}

.glyphicon-ok {
    color: green;
}

.info-block {
    padding-left: 0px;
}
// controllers.js

angular.module(‘firstMoudule‘, [])
    .service(‘hobbyDataService‘, function() {
        return {
            hobbies: [1, 3]
        }
    })
    .controller(‘firstController‘, [‘$scope‘, ‘hobbyDataService‘, function($scope, hobbyDataService) {
        $scope.hobbies = [{
            id: 1,
            name: ‘coding‘
        }, {
            id: 2,
            name: ‘soccer‘
        }, {
            id: 3,
            name: ‘reading‘
        }, {
            id: 4,
            name: ‘sleeping‘
        }];
        $scope.hobbyData = hobbyDataService;
        $scope.toggleHobbySelection = function(id) {
            var index = $scope.hobbyData.hobbies.indexOf(id);
            if (index === -1) {
                $scope.hobbyData.hobbies.push(id);
            } else {
                $scope.hobbyData.hobbies.splice(index, 1);
            }
            console.log($scope.hobbyData.hobbies);
        }
    }]);

页面效果

时间： 2024-10-18 15:36:44

AngularJS表单验证操作例子分享的相关文章

使用 WTForms 进行表单验证的例子

#使用 WTForms 进行表单验证的例子 from wtforms import Form from wtforms import BooleanField from wtforms import TextField from wtforms import PasswordField from wtforms import validators #注册表单 class RegisterForm(Form): username = TextField("Username",[valid

javascript:正则表达式、一个表单验证的例子

阅读目录 本文内容: 正则表达式: 利用正则表达式进行表单验证的例子: 回到顶部 本文内容: 正则表达式 正则表达式的使用方法 正则表达式的特殊匹配字符 正则表达式修饰符 利用正则表达式进行表单验证的例子 首发日期:2018-05-13 回到顶部 正则表达式: 正则表达式的使用方法: 首先创建正则表达式对象: [正则表达式的字符规则:如果是没有特殊意义的字符,直接写:如果是有特殊意义的,直接写:如果想将特殊意义的字符转成非特殊意义的,前面使用\] 可以通过RegExp对象创建正则表达式对象: v

Springboot自带的表单验证操作

在创建Springboot项目中,我们使用了表单验证操作,这一操作将极大地简化我们编程的开发 1.接收数据,以及验证 @PostMapping("/save") public ModelAndView save(@Valid ProductForm productForm, BindingResult bindingResult, Map<String, Object> map) { //1.表单验证 if (bindingResult.hasErrors()) { map

AngularJs表单验证

常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required />   2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3. 最大长

AngularJs 表单验证

看到一些博客说这个框架要过时了,但是还是学习了下,觉的很方便的一个框架,有空的同学可以看看,适合我们入门看,比较基础. 对于日常的开发来说,最常见的开发场景就是通过表单编辑数据,这里涉及的问题就是验证问题. angularjs 内置已经支持了常见的验证方式,可以轻松实现表单验证. 1. 绑定 为了方便,我们在 $scope 上下文对象上创建一个 model 来表示我们编辑的内容. $scope.model = { id : 8, name: "alice", email: "

AngularJS表单验证实现方法详解

本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实例代码 <!doctype html> <html ng-app="lesson" ng-controller="FormCtrl" > <head> <meta http-equiv="Content-Type&qu

AngularJS表单验证,手动验证或自动验证

AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件:1.给form元素加上novalidate="novalidate":2.给form元素加上name="theForm",如下: <!DOCTYPE html> <html lang="en" ng-app="myApp1"&g

AngularJS 表单验证小结

注:本文所述的表单验证即AngularJS自带的表单验证,无需引入第三方的插件 一.常用的验证特性标签 1.非空 为input加入一个required属性即可,例如: <input type="text" required> 2.最大长度,最小长度 为input加上ng-maxlength或者ng-minlength属性,并且属性值为需要设置的长度,例如: <input type="text" ng-minlength="5"

angular js h5关于表单验证的例子

angular js表单验证 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="angular.min.js"></script> <link rel="stylesheet" href="