提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

教你用AngularJS框架一行JS代码实现控件验证效果

JS框架代码 实现 效果 验证 控件 一行
2023-06-13 09:15:32 时间

如上图所示，我们需要实现如下这些验证功能：

控件都是必输控件
都需要控制最大长度
第一次打开页面，控件不能显示为错误状态
输入内容再清空后，必输控件需要显示为错误状态
只有所有输入合法后，发布按钮才能变为可用状态
通过AngularJS，我们可以很轻松的实现这些要求，只需要1行JS代码。UI样式这里采用的是Bootstrap。先上示例代码：

HTML。

<!DOCTYPEhtml>
<htmllang="zh-cn"ng-app="ftitApp">
<head>
<metacharset="utf-8"/>
<title>Demo</title>
<linkhref="/Content/bootstrap.css"rel="stylesheet"/>
<scriptsrc="/Scripts/angular.js"></script>
</head>
<body>
<divclass="containerbody-content">
<!--主要内容区域-->
<divclass="rowmain-content">
<divclass="col-md-9">

<!--联系我们表单区域-->
<formaction="/Contact/Create"method="post"role="form"name="createContactForm"ng-controller="ContactCreateController">
<!--UserName您的称呼-->
<divclass="form-grouphas-feedback"ng-class="{"has-success":!createContactForm.UserName.$pristine&&createContactForm.UserName.$valid,"has-error":!createContactForm.UserName.$pristine&&createContactForm.UserName.$invalid}">
<labelfor="UserName">您的称呼*</label>
<inputtype="text"class="form-control"ng-model="userName"name="UserName"autofocus=""requiredng-maxlength=30>
<divng-show="!createContactForm.UserName.$pristine&&createContactForm.UserName.$valid">
<spanclass="glyphiconglyphicon-okform-control-feedback"></span>
</div>
<divng-show="!createContactForm.UserName.$pristine&&createContactForm.UserName.$invalid">
<spanclass="glyphiconglyphicon-removeform-control-feedback"></span>
</div>
</div>
<!--UserMail邮箱地址-->
<divclass="form-grouphas-feedback"ng-class="{"has-success":!createContactForm.UserMail.$pristine&&createContactForm.UserMail.$valid,"has-error":!createContactForm.UserMail.$pristine&&createContactForm.UserMail.$invalid}">
<labelfor="UserMail">邮箱地址*</label>
<inputtype="email"class="form-control"ng-model="userMail"name="UserMail"requiredng-maxlength=30>
<divng-show="!createContactForm.UserMail.$pristine&&createContactForm.UserMail.$valid">
<spanclass="glyphiconglyphicon-okform-control-feedback"></span>
</div>
<divng-show="!createContactForm.UserMail.$pristine&&createContactForm.UserMail.$invalid">
<spanclass="glyphiconglyphicon-removeform-control-feedback"></span>
</div>
</div>
<!--Subject主题-->
<divclass="form-grouphas-feedback"ng-class="{"has-success":!createContactForm.Subject.$pristine&&createContactForm.Subject.$valid,"has-error":!createContactForm.Subject.$pristine&&createContactForm.Subject.$invalid}">
<labelfor="Subject">主题*</label>
<inputtype="text"class="form-control"ng-model="subject"name="Subject"requiredng-maxlength=100>
<divng-show="!createContactForm.Subject.$pristine&&createContactForm.Subject.$valid">
<spanclass="glyphiconglyphicon-okform-control-feedback"></span>
</div>
<divng-show="!createContactForm.Subject.$pristine&&createContactForm.Subject.$invalid">
<spanclass="glyphiconglyphicon-removeform-control-feedback"></span>
</div>
</div>
<!--Content内容-->
<divclass="form-grouphas-feedback"ng-class="{"has-success":!createContactForm.Content.$pristine&&createContactForm.Content.$valid,"has-error":!createContactForm.Content.$pristine&&createContactForm.Content.$invalid}">
<labelfor="Content">内容*</label>
<textareacols="4"rows="5"class="form-control"ng-model="content"name="Content"requiredng-maxlength=1000></textarea>
<divng-show="!createContactForm.Content.$pristine&&createContactForm.Content.$valid">
<spanclass="glyphiconglyphicon-okform-control-feedback"></span>
</div>
<divng-show="!createContactForm.Content.$pristine&&createContactForm.Content.$invalid">
<spanclass="glyphiconglyphicon-removeform-control-feedback"></span>
</div>
</div>
<!--提交按钮-->
<divclass="form-group">
<divng-show="createContactForm.$valid">
<inputtype="image"src="/Content/images/comment_publish_button.png"onsubmit="submit();"value="发布"ng-disabled="!createContactForm.$valid"/>
</div>
<divng-show="!createContactForm.$valid">
<imgsrc="/Content/images/invalid_publish_button.png"/>
</div>
</div>
</form>
</div>
</div>
</div>

<scriptsrc="/Scripts/ftit/ContactCreateController.js"></script>
</body>
</html>

JS代码（真的只有一行哟）

ContractCreateController.js

varftitAppModule=angular.module("ftitApp",[]);

这样就好啦。几个关键的地方解释一下：

ng-class：这个标签用来控制class的值。例如ng-class="{"has-success":!createContactForm.Content.$pristine}的意思就是，如果!createContactForm.Content.$pristine的值为true，class的值就为has-success。
ng-show：控制是否显示该控件。
createContactForm.$valid：全部验证通过后，值为true，否则为false
createContactForm.Content.$valid：标识Content控件是否通过验证，通过为true，否则为false
createContactForm.Content.$pristine：标识Content控件是否从未输入过。从未输入为true，否则为false
更细节的技术问题请查看AngularJS的技术文档。

相关文章