100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > anjular.js表单验证实例

anjular.js表单验证实例

时间:2023-10-09 16:44:24

相关推荐

anjular.js表单验证实例

应用声明,控制器

<form action="" method="post" id="myForm" name="logForm" ng-submit="submitForm(logForm.$valid)" ng-app="myApp" ng-controller="validateCtrl" novalidate></form>

表单的数据绑定

<input name="name" id="vName" class="weui_input" type="text" placeholder="您要举报的应用完整名称" ng-model="formData.name" required>

单选数据绑定

<input type="radio" class="weui_check" name="bad_type" value="2" ng-model="formData.bad_type" required>

复选框数据绑定

<label>Favorite Colors</label><div class="form-group"><label class="checkbox-inline"><input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red"> Red</label><label class="checkbox-inline"><input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue</label><label class="checkbox-inline"><input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green</label></div>

打印数据

formData(在表单内打印有效)

表单验证

<input type="button" id="cheForm" class="weui_btn weui_btn_primary" value="举报" ng-show="logForm.$valid"/>

声明表单

//anjularjs表单var app = angular.module('myApp',[]);app.controller('validateCtrl', function($scope){//声明formData$scope.formData={};});

默认隐藏属性显示问题解:

html元素中:

ng-style="style" style="display:none;"

js文件:

//anjularjs表单var app = angular.module('myApp',[]);app.controller('validateCtrl', function($scope){$scope.formData={};$scope.style="{display:none}";$(".weui_btn_primary").show();});

基本上anjular.js表单验证的实例都可以用这个做了,至于其他的可以去看下anjular.js的教程,最后再给大家推荐一个源码网站,名字叫原创源码库,不错的源码发布站点,希望大家喜欢。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。