Rumah
hujung hadapan web
tutorial js
AngularJS melaksanakan pengesahan borang manual dan pengesahan borang automatik_AngularJS
hujung hadapan web
tutorial js
AngularJS melaksanakan pengesahan borang manual dan pengesahan borang automatik_AngularJS
AngularJS melaksanakan pengesahan borang manual dan pengesahan borang automatik_AngularJS
angularjs
pengesahan borang
Terdapat kira-kira dua jenis pengesahan borang dalam AngularJS, satu pengesahan manual dan satu lagi pengesahan automatik.
1. Pengesahan manual
Pengesahan manual yang dipanggil adalah untuk mengesahkan melalui atribut borang AngularJS. Untuk menjadi borang AngularJS, dua syarat mesti dipenuhi:
1. Tambahkan novalidate="novalidate" pada elemen borang;
2. Tambahkan nama="theForm" pada elemen borang, seperti berikut:
● Menambah novalidate="novalidate" pada borang bermakna borang itu tidak lagi menggunakan ciri pengesahan HTML5
<!DOCTYPE html>
<html lang="en" ng-app="myApp1">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../css/main.css"/>
</head>
<body>
<nav >
<div class="container">
<div class="navbar-header">
<a href="/" class="navbar-brand">Form Submitting</a>
</div>
</div>
</nav>
<div class="container main-content" ng-controller="myCtrl1">
<!--novalidate让表单不要使用html验证-->
<!--theForm变成scope的一个字段-->
<form ng-submit="onSubmit(theForm.$valid)" novalidate="novalidate" name="theForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" ng-model="formModel.name"/>
</div>
<div class="form-group" ng-class="{
'has-error': !theForm.email.$valid && (!theForm.$pristine || theForm.$submitted),
'has-success': theForm.email.$valid && (!theForm.$pristine || theForm.$submitted)
}">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" ng-model="formModel.email" required="required" name="email"/>
<p class="help-block" ng-show="theForm.email.$error.required && (!theForm.$pristine || theForm.$submitted)">必填</p>
<p class="help-block" ng-show="theForm.email.$error.email && (!theForm.$pristine || theForm.$submitted)">email格式不正确</p>
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" ng-model="formModel.username"/>
</div>
<div class="form-group">
<label for="age">Age</label>
<input type="number" class="form-control" id="age" ng-model="formModel.age"/>
</div>
<div class="form-group">
<label for="sex">Sex</label>
<select name="sex" id="sex" class="form-control" ng-model="formModel.sex">
<option value="">Please choose</option>
<option value="male">Mail</option>
<option value="femail">Femail</option>
</select>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control" id="password" ng-model="formModel.password"/>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">Register</button>
</div>
<pre class="brush:php;toolbar:false">
{{theForm | json}}