angular实现form验证实例代码

前端之家收集整理的这篇文章主要介绍了angular实现form验证实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先上效果页面

其中几个知识点

1、angularJs提供了几个新的type类型:

type="email"

type="number"

type="url"

2、几个参数含义

ng-required //是否必填,true/false

ng-minlength //最小长度,数字

ng-maxlength //最大长度,数字

min //最小数字,数字,仅在type="number"下

max //最小数字,数字,仅在type="number"

3、几个form控制变量,先来一段代码

用户名">
HTML代码即为 myform.username.$pristine

formName.inputFieldName.$dirty //字段是否更改,对应上面的HTML代码即为 myform.username.$dirty

formName.inputFieldName.$valid //字段有效,对应上面的HTML代码即为 myform.username.$valid

formName.inputFieldName.$invalid //字段无效,对应上面的HTML代码即为 myform.username.$invalid

formName.inputFieldName.$error //字段错误信息,使用频率比较高,对应上面的HTML代码即为 myform.username.$error

4、下面直接上代码,首先是HTML代码,使用了bootstrap.css样式,在结尾引入了angular

form验证
用户名
required="true" ng-model="data.username" class="form-control" placeholder="请输入用户名">
用户名必须大于5位
用户名必须小于于10位
required="true" ng-model="data.password" class="form-control" placeholder="请输入密码">

<div class="form-group" ng-class="{'has-error':myform.passwordconfirm.$dirty&&myform.passwordconfirm.$invalid}">
<label class="col-sm-2">确认密码
<div class="col-sm-8">
<input type="password" name="passwordconfirm" ng-required="true" ng-model="data.passwordconfirm" class="form-control" placeholder="请输入确认密码">


<div class="col-sm-2 text-danger" ng-show="data.passwordconfirm!=data.password&&myform.password.$dirty&&myform.passwordconfirm.$dirty">两次密码不一致

required="true" ng-model="data.email" class="form-control" placeholder="请输入邮箱地址">
required="true" min="10" max="99" ng-model="data.age" class="form-control" placeholder="请输入您的年龄">
required="true" ng-model="data.blog" class="form-control" placeholder="请输入博客地址">
博客地址
dio-inline"> dio" value="1" ng-model="data.sex" name="sex"> 男
Box-inline"> {{hoppy.name}}

<div class="form-group">
<label class="col-sm-2">地 址
<div class="col-sm-3">
<select class="form-control" ng-model="data.provinec" ng-options="x.id as x.name for x in cities | cityfilter:0">

<script src="js/angular.js">
<script src="js/app.js">

下面为js代码(可能其中有些不妥之处,请指正,谢谢)

// 判断是否是选中状态
function istrue(id){
for(var i=0;i<$scope.data.Ahoppy.length;i++){
if($scope.data.Ahoppy[i]===id){
return true;
}
}
return false;
};
// 获取选中的爱好

$scope.togglehoppy = function() {
$scope.data.Ahoppy = [];
angular.forEach($scope.hoppies,key) {
if (item.checked == true) {
$scope.data.Ahoppy.push(item.id);
}
});
}

}])
})(window)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章