标签:
这个项目的登录注册表单最开始想当然的用了blur+focus,功能实现是实现了,然而那个用户体验,啊,有这种东西?
最近又开始做表单,谷歌了一下怎样优雅写表单然后发现了AngularJs。。。慕课上啃了一下验证视频然后开工用ng。刚好这个项目客户不满意验证表单这里,上面让我改,改就改咯,于是就用上了ng。体验感觉上是上去了,IE8那个兼容不想管了orz。
首先引入ng,
然后在body上加上这句
ng-app="validationApp" ng-controller="mainController"
创建一个js文件放自己的代码,也不知道这么写好不好,反正能实现。。。。把登录注册什么的分开提交。暂时没研究出来怎么把ng和ajax提交一起写,所以目前只是用ng来判断这个表单能否提交点击。
//ng代码 var validationApp = angular.module(‘validationApp‘, []); // create angular controller validationApp.controller(‘mainController‘, function($scope) { //登录表单数据初始化 $scope.logindata = {}; // 登录表单提交 $scope.submitloForm = function(isValid) { //登录表单数据打印 // console.log($scope.logindata); // 通过前端页面验证 if (isValid) { // alert(‘登录成功‘); } }; //注册表单数据初始化 $scope.registdata = {}; // 注册表单提交 $scope.submitreForm = function(isValid) { // 通过前端页面验证 if (isValid) { // console.log($scope.registdata); // alert(‘注册成功‘); } }; //忘记密码表单数据初始化 $scope.forgetdata = {}; // 忘记密码表单提交 $scope.submitfoForm = function(isValid) { // 通过前端页面验证 if (isValid) { // alert(‘忘记密码‘); // console.log($scope.forgetdata); } }; }); validationApp.directive(‘compare‘,function(){ var o = {}; o.strict= "AE"; o.scope = { orgText:"=compare" } o.require = "ngModel"; o.link = function(sco,ele,att,con){ con.$validators.compare = function(v){ return v == sco.orgText; } sco.$watch("orgText",function(){ con.$validate(); }); } return o; })
提交ajax代码
//注册按钮点击事件 $("#regist").click(function(){ var phone = $("#phone").val(); var password = $("#password").val(); var qq = $("#qq").val(); var captcha = $("#captcha").val(); if ($("#phone").val()=="" || $("#password").val()=="") { alert("请完善注册信息!"); $("#phone").focus(); } else { $.post("{PURL(‘login/regist‘)}",{ ‘phone‘:phone,‘password‘:password,‘captcha‘:captcha },function(data){ if (data == 2) { alert("注册成功!可以去登录了哟!"); window.location.href="{PURL(‘login‘)}"; }else{ alert(data) } }) } }) function setTimes(obj){ if ($("#phone").val()=="") { $("#phone").next("em").html("手机号码不能为空!"); $("#phone").focus(); return }else{ /*判断手机号是否正确*/ var myreg=/^1(3|5|7|8)\d\d\d\d\d\d\d\d\d$/; if(!myreg.test($(‘#phone‘).val())){ $("#phone").next("em").html("手机号码错误!"); $("#phone").focus(); return }else{ $("#phone").next("em").html(""); } } var phone = $("#phone").val(); $.post("{PURL(‘login/sms‘)}",{ "phone":phone },function(data){ if (data==1) { setTime(obj) } else { $("#phone").next("em").html(data); } }) }
倒计时函数,【随手污染了全局
var count = 60; function setTime(obj) { if (count==0) { obj.removeAttribute("disabled"); obj.value = "获取验证码"; count = 60; return } else { obj.setAttribute("disabled",true); obj.value = "重新获取("+count+")"; count--; } setTimeout(function(){ setTime(obj)} ,1000); }
贴一个注册页面的表单
<form name="registForm" ng-submit="submitreForm(registForm.$valid)" novalidate> <div class="form_control"> <input class="required required1" type="text" name="phone" id="phone" placeholder="手机号码" ng-model="registdata.phone" ng-pattern="/^1(3|5|7|8)\d\d\d\d\d\d\d\d\d$/" required > <em ng-show="registForm.phone.$invalid && registForm.phone.$dirty" >手机号码输入错误</em> <em ng-show="registForm.phone.$error.required&& registForm.phone.$touched" >手机号码不可为空</em> </div> <div class="form_control"> <input class="required" type="password" name="password" id="password" placeholder="密码" ng-model="registdata.password" required ng-minlength="6" ng-maxlength="20" ng-pattern="/^\w+$/"> <em ng-show="registForm.password.$error.minlength||registForm.password.$error.maxlength" >密码长度在6到20位之间</em> <em ng-show="registForm.password.$error.pattern" >密码由数字、26个英文字母或者下划线组成</em> <em ng-if="registForm.password.$error.required&& registForm.password.$dirty" >密码不可为空</em> </div> <div class="form_control2"> <input class="capipt required" type="text" name="captcha" id="captcha" placeholder="验证码" required ng-model="registdata.captcha"> <em ng-if="registForm.captcha.$error.required&& registForm.captcha.$dirty" >验证码不可为空</em> <input type="button" id="captchabtn" value="获取验证码" class="login-btn btn" onclick="setTimes(this);"> </div> <div class="form_control"> <input class="required" type="text" name="qq" id="qq" placeholder="QQ(非必填)" ng-pattern="/^\w+$/" ng-model="registdata.qq"> <em ng-if="registForm.qq.$error.pattern" >qq号码错误!</em> </div> <div class="form_control"> <input type="submit" id="regist" value="注册" class="login-btn btn" ng-disabled="registForm.$invalid"> </div> </form>
标签:
原文地址:http://www.cnblogs.com/liyinSakura/p/5783449.html