angular js创建表单_利用angular.js创建注册表单

angular.js是前端一个比较新颖，思想比较独特的框架，今天我利用angular写了一个注册表单，实现了一些功能

首先呢介绍一下在写这个表单验证过程中所遇到的一些难题

1.输入密码与再次输入密码的比较，

这里是创建了一个compare指令，该指令可以和一些数据进行对比，以返回布尔值

app.directive('compare',function () {

var com = {};

com.strict="AE";

com.scope = {

orgText: '=compare'

};

com.require='ngModel';

com.link = function (scope,elem,attr,control) {

control.$validators.compare = function (v) {

return v ==scope.orgText;

}

scope.$watch('orgText',function () {

control.$validate();

})

}

return com;

})

该段是创建compare的代码

2.遇到单选框所取值不能获取的问题，

这里的解决方法是给单选框赋值，例如给男选项input内部加上value=“男”，女选项input内部加上value=“女”，这样当点击注册时，会获取value的值，

男  

女  

3.其实呢上面问题还是会有bug的，就是当注册者不去动单选框的时候，性别选项的内容是不会在注册时获取的，只有点击了选项才会在注册时被获取，所以这里又会用到一点知识，那就是ng-init

这里给加上一个初始化的性别

性别:

男  

女  

这样就解决了性别的传值问题

4.在angular.js中还是可以用自定义的正则表达式来给输入框加上规则的

ng-pattern = “正则表达式”，

5.这里还有一个问题，在这个注册表单中，我是用的my97，这是一个日期选项的插件，但是就是这里出现了问题，当我用到这个插件时发现不能获取出生日期的值，

οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'{%y-18}-%M-%d'})"

class="form-control"

name="birth"

placeholder="请输入日期"

ng-model ="userdata.birth"

required="required"

/>

后来查了一下，好像就是不兼容，但是也有简单的结局办法

那就是给input加上一个οnchange=""

这样就简单的解决了这个问题

6.其实这么做还是有一个问题，就是当输入框内部有内容，但是内容错误时，还是能提交数据，这样的话，会造成数据的丢失，那么怎么来杜绝这种情况呢，我这里是在js代码中田间了一个函数，这个函数来控制提交按钮是否可用，判断条件是userdata内所需要的内容是否存在

$scope.save = function () {

var username = $scope.userdata.username;

var usersex = $scope.userdata.sex;

var userpass = $scope.userdata.password;

var userpass2 = $scope.userdata.password2;

var usertel = $scope.userdata.tel;

var userbirth = $scope.userdata.birth;

var useremail = $scope.userdata.email;

if (username&&usersex&&userpass&&userpass2&&usertel&&userbirth&&useremail) {

return false;

}else{return true;}

}

html添加

注册

最后，我把完整的代码给写出来

表单验证

.wrapper{margin: 20px auto; width: 300px;position: relative;}

.error{color: #a10;}

.form_group{position: relative;margin-top: 15px;}

input .error{border: 1px solid #a10;}

.phone,.username,.password,.confirm_password,.birth,.emali,.sex{position: absolute;top: 36px;left: 280px; color: green;}

#man{margin-left: 10px;}

#woman{margin-left: 10px;}

注册

用户名：

placeholder="请输入你的昵称"

name="username"

class="form-control"

ng-model="userdata.username"

ng-minlength="4"

ng-maxlength = "32"

required="required"

/>

ng-if="signUpForm.username.$valid">

用户名不可为空！

用户名应该在4-32位之间！

性别:

男  

女  

密码：

placeholder="请输入密码"

name="password"

class="form-control"

ng-model="userdata.password"

ng-minlength = "6"

ng-maxlength = "255"

required="required"

/>

ng-if="signUpForm.password.$valid">

ng-if="signUpForm.password.$error.required&&signUpForm.password.$touched"

ng-model="all">密码不可为空！

ng-if="(signUpForm.password.$error.minlength||

signUpForm.password.$error.maxlength)

&&signUpForm.password.$touched" ng-model="all">密码长度应该在6-255！

确认密码：

placeholder="再次输入密码"

name="password2"

class="form-control"

ng-model="userdata.password2"

compare="userdata.password"

required="required"

/>

ng-if="signUpForm.password2.$valid">

两次输入密码不一致！

电话：

placeholder="请输入电话"

type="tel" name="tel"

ng-model="userdata.tel"

ng-pattern="/^1[3,5,7,8]\d{9}$/"

required>

ng-if="signUpForm.tel.$valid">

ng-if="signUpForm.tel.$error.required&&signUpForm.tel.$touched">电话不能为空！

ng-if="signUpForm.tel.$error.pattern&&signUpForm.tel.$touched">请输入有效手机号!

请输入生日:

οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'{%y-18}-%M-%d'})"

class="form-control"

name="birth"

placeholder="请输入日期"

ng-model ="userdata.birth"

required="required"

οnchange=""

/>

ng-if="signUpForm.birth.$valid">

请输入正确的生日

请输入邮箱：

class="form-control"

name="email"

placeholder="输入正确的邮箱"

ng-model = "userdata.email"

ng-pattern="/^[a-z0-9]+@([a-z0-9]+\.)+[a-z]{2,4}$/i"

required="required"

/>

ng-if="signUpForm.email.$valid">

请输入正确的邮箱

邮箱是必填项

注册

然后是js代码

var app =angular.module('myApp',[])

app.controller('SignUpController',function ($scope) {

$scope.userdata={};

$scope.submitForm = function () {

console.log($scope.userdata);

}

})

app.directive('compare',function () {

var com = {};

com.strict="AE";

com.scope = {

orgText: '=compare'

};

com.require='ngModel';

com.link = function (scope,elem,attr,control) {

control.$validators.compare = function (v) {

return v ==scope.orgText;

}

scope.$watch('orgText',function () {

control.$validate();

})

}

return com;

})

这里需要提一下的是，引用的有my97插件和bootstrap框架以及angular.js框架