这两天写了个登录注册的页面,其中表单的提示与验证是用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();
})
}
}
})
最后的页面效果是这样的: