如何使用angularjs实现表单验证分析

你猜 阅读:175 2021-09-07 17:40:56 评论:0
本文章主要介绍了如何使用angularjs实现表单验证,具有不错的的参考价值,希望对您有所帮助,如解说有误或未考虑完全的地方,请您留言指出,谢谢!
<!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
    <title>angularjs-validate</title> 
    <script type="text/javascript" src="js/angular.min.js"></script> 
</head> 
<body> 
    <form name="form1" id="form1"> 
    账号:<input type="text" name="username" ng-model="username" required> 
    <span style="color:red" ng-show="form1.username.$dirty && form1.username.$invalid"> 
        <span ng-show="form1.username.$error.required">请输入账号</span> 
    </span> 
    <br /> 
    邮箱:<input type="text" name="email" ng-model="email" required> 
    <span style="color:red" ng-show="form1.email.$dirty && form1.email.$invalid"> 
        <span ng-show="form1.email.$error.required">请输入邮箱</span> 
    </span> 
     
    <p> 
<input type="submit" ng-disabled="form1.username.$dirty && form1.username.$invalid || form1.email.$dirty && form1.email.$invalid"> 
</p> 
    </form> 
    <script> 
var app = angular.module('myApp', []); 
</script> 
</body> 
</html>

标签:前端
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号