<form?ng-submit="formSign()"?name="formSub"?novalidate?ng-controller="formCtrl"?class="formSign">
<div?class="form-group">
<label>用戶名:</label>
<input?type="text"?name="user"?id="user"?placeholder="輸入手機號碼"?required?ng-model="formDate.user"?ng-class="{'error':formSub.user.$invalid?&&?formSub.user.$dirty}"?ng-pattern="/^(13[0-9]|14[5|7]|15[\d]|18[\d])\d{8}$/"?class="form-control"?/>
<p?ng-if="formSub.user.$error.pattern?&&?formSub.user.$dirty">輸入11位電話號碼</p>
<p?ng-if="formSub.user.$error.required?&&?formSub.user.$dirty">手機號碼不能為空</p>
</div>
<div?class="form-group">
<label>密碼:</label>
<input?type="text"?name="password"?id="password"?placeholder="輸入密碼?4-16位"?required?ng-model="formDate.password"?ng-class="{'error':formSub.password.$invalid?&&?formSub.password.$dirty}"?ng-minlength="4"?ng-maxlength="16"?class="form-control"?/>
<p?ng-if="formSub.password.$error.required?&&?formSub.password.$dirty">密碼不能為空</p>
<p?ng-if="(formSub.password.$error.minlength?||?formSub.password.$error.maxlength)?&&?formSub.password.$dirty">輸入4到16位密碼</p>
</div>
<div?class="form-group">
<label>確認密碼:</label>
<input?type="text"?name="password2"?id="password2"?placeholder="確認密碼"?required?ng-model="formDate.password2"?ng-class="{'error':formSub.password2.$invalid?&&?formSub.password2.$dirty}"?ng-minlength="4"?ng-maxlength="16"?class="form-control"?/>
<p?ng-if="formSub.password2.$error.required?&&?formSub.password2.$dirty">密碼不能為空</p>
<p?ng-show="(formDate.password?!=?formDate.password2)?&&?formSub.password2.$dirty">兩次輸入不一致</p>
</div>
<button?class="btn?btn-primary"?ng-disabled="(formDate.password?!=?formDate.password2)?||formSub.$invalid">提交</button>
</form>
</body>
<script?type="text/javascript">
angular.module('MyForm',?[])
.controller('formCtrl',?function($scope)?{
$scope.formData?=?{};
$scope.formSign?=?function()?{
console.log($scope.formDate);
if($scope.formSub.$invalid)?{
alert('信息有誤')
}?else?{
alert('提交完成')
}
}
})
</script>
2017-05-16
不錯不錯,如果理解不了那個自定義組件的話,這樣寫也挺不錯的
2017-01-14
挺好。各有各的好