這兩天寫了個登錄註冊的頁面，其中表單的提示與驗證是用angular和h5的屬性來寫的，由於是ionic項目，所以裏面有一些ionic中的css類，話不多說，上代碼
html代碼如下：
<form name="sign">
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">First Name</span>
<span class="sign-warning" ng-if="sign.first_name.$error.required&&sign.first_name.$touched">*This does not allow null</span>
<input name="first_name"
ng-model="user.first_name"
type="text"
required
placeholder="John">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Last Name</span>
<span class="sign-warning" ng-if="sign.last_name.$error.required&&sign.last_name.$touched">*This does not allow null </span>
<input name="last_name"
ng-model="user.last_name"
type="text"
placeholder="Suhr"
required>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<span class="sign-warning" ng-if="sign.email.$error.email&&sign.email.$touched">*You enter a wrong email</span>
<span class="sign-warning" ng-if="sign.email.$error.required&&sign.email.$touched">*This does not allow null</span>
<input name="email"
ng-model="user.email"
type="email"
required
placeholder="[email protected]">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Phone</span>
<span class="sign-warning" ng-if="sign.tel.$error.required&&sign.tel.$touched">*This does not allow null</span>
<input name="tel"
ng-model="user.tel"
type="tel"
required
placeholder="enter your cel phone number please">
</label>
<label class="item item-input item-stacked-label">
<p>
<span class="input-label">Password</span>
<span class="sign-warning"
ng-if="(sign.password.$error.minlength||
sign.password.$error.maxlength)&&
sign.password.$touched">
*密碼位數請在6到18位數之間</span></p>
<input name="password"
ng-model="user.password"
type="password"
ng-minlength="6"
ng-maxlength="18"
placeholder="enter your password please"
required>
</label>
<label class="item item-input item-stacked-label">
<p><span class="input-label">Confirm Password</span><span class="sign-warning" ng-if="sign.confirm_pass.$error.compare&&sign.confirm_pass.$touched">*前後兩次密碼輸入不一致</span></p>
<input
name="confirm_pass"
ng-model="user.confirm_pass"
type="password"
placeholder="confirm your password please"
compare="user.password"
required>
</label>
</div>
<div class="padding">
<button class="button button-block color999" style="color:#fff"
ng-click="submitForm()"
ng-disabled="sign.first_name.$error.required||
sign.last_name.$error.required||
sign.email.$error.email||
sign.email.$error.required||
sign.tel.$error.required||
sign.password.$error.required||
sign.password.$error.minlength||
sign.password.$error.maxlength||
sign.confirm_pass.$error.compare">Continue</button>
</div>
</form>如果有不明白的，可以去查一下H5表單的屬性，還有ng-disabled的運用。
另外，確認密碼需要寫個指令，如下：
//表單驗證中的確認密碼
.directive('compare',function(){
return {
strict :'AE',
scope : {
orgText : '=compare'
},
require : 'ngModel',
link : function(sco,ele,attr,con){
con.$validators.compare = function(v){
return v == sco.orgText;
}
sco.$watch('orgText',function(){
con.$validate();
})
}
}
})最後的頁面效果是這樣的：
