利用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的值，
<label for="general" id="man">男 <input type="radio" name="sex" ng-model="userdata.sex" value="男" ng-checked="true" /></label>
<label for="general" style="margin-left: 20px;">女 <input type="radio" name="sex" ng-model="userdata.sex" value="女"/></label>
3.其实呢上面问题还是会有bug的，就是当注册者不去动单选框的时候，性别选项的内容是不会在注册时获取的，只有点击了选项才会在注册时被获取，所以这里又会用到一点知识，那就是ng-init
这里给加上一个初始化的性别
<label for="general">性别:</label>
<label for="general" id="man">男 <input type="radio" name="sex" ng-model="userdata.sex" value="男" ng-checked="true" ng-init="userdata.sex = '男'"/></label>
<label for="general" style="margin-left: 20px;">女 <input type="radio" name="sex" ng-model="userdata.sex" value="女"/></label>
这样就解决了性别的传值问题
4.在angular.js中还是可以用自定义的正则表达式来给输入框加上规则的
ng-pattern = “正则表达式”，
5.这里还有一个问题，在这个注册表单中，我是用的my97，这是一个日期选项的插件，但是就是这里出现了问题，当我用到这个插件时发现不能获取出生日期的值，
<input type="text"
onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'{%y-18}-%M-%d'})"
class="form-control"
name="birth"
placeholder="请输入日期"
ng-model ="userdata.birth"
required="required"
/>
后来查了一下，好像就是不兼容，但是也有简单的结局办法
那就是给input加上一个onchange=""
这样就简单的解决了这个问题
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添加
<button class="btn btn-primary" ng-disabled="save()">注册</button>
最后，我把完整的代码给写出来
<!doctype html>
<html lang="en" >
<head>
<meta charset="UTF-8" />
<title>表单验证</title>
<link rel="stylesheet" type="text/css" href="css/dist/css/bootstrap.min.css"/>
<style type="text/css">
.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;}
</style>
<script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="My97DatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/form.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-app="myApp" ng-controller="SignUpController" >
<div class="wrapper">
<form name="signUpForm" ng-submit="submitForm()">
<h2>注册</h2>
<!--用户名-->
<div class="form_group">
<label>用户名：</label>
<input type="text"
placeholder="请输入你的昵称"
name="username"
class="form-control"
ng-model="userdata.username"
ng-minlength="4"
ng-maxlength = "32"
required="required"
/>
<p class="glyphicon glyphicon-ok username"
ng-if="signUpForm.username.$valid"></p>
<p class="error" ng-if="signUpForm.username.$error.required
&&signUpForm.username.$touched">用户名不可为空！</p>
<p class="error" ng-if="(signUpForm.username.$error.minlength||
signUpForm.username.$error.maxlength)&&signUpForm.username.$touched"ng-model="all">用户名应该在4-32位之间！</p>
</div>
<!--性别-->
<div class="form_group">
<label for="general">性别:</label>
<label for="general" id="man">男 <input type="radio" name="sex" ng-model="userdata.sex" value="男" ng-checked="true" ng-init="userdata.sex = '男'"/></label>
<label for="general" style="margin-left: 20px;">女 <input type="radio" name="sex" ng-model="userdata.sex" value="女"/></label>
</div>
<!--密码-->
<div class="form_group">
<label >密码：</label>
<input type="password"
placeholder="请输入密码"
name="password"
class="form-control"
ng-model="userdata.password"
ng-minlength = "6"
ng-maxlength = "255"
required="required"
/>
<p class="glyphicon glyphicon-ok password"
ng-if="signUpForm.password.$valid"></p>
<p class="error"
ng-if="signUpForm.password.$error.required&&signUpForm.password.$touched"
ng-model="all">密码不可为空！</p>
<p class="error"
ng-if="(signUpForm.password.$error.minlength||
signUpForm.password.$error.maxlength)
&&signUpForm.password.$touched" ng-model="all">密码长度应该在6-255！</p>
</div>
<div class="form_group">
<label for="">确认密码：</label>
<input type="password"
placeholder="再次输入密码"
name="password2"
class="form-control"
ng-model="userdata.password2"
compare="userdata.password"
required="required"
/>
<p class="glyphicon glyphicon-ok confirm_password"
ng-if="signUpForm.password2.$valid"></p>
<p class="error" ng-if="signUpForm.password2.$error.compare&&signUpForm.password2.$touched">两次输入密码不一致！</p>
</div>
<div class="form_group">
<label>电话：</label>
<input class="form-control"
placeholder="请输入电话"
type="tel" name="tel"
ng-model="userdata.tel"
ng-pattern="/^1[3,5,7,8]\d{9}$/"
required>
<p class="glyphicon glyphicon-ok input_result text-success phone"
ng-if="signUpForm.tel.$valid"></p>
<p class="text-danger"
ng-if="signUpForm.tel.$error.required&&signUpForm.tel.$touched">电话不能为空！</p>
<p class="text-danger glyphicon glyphicon-remove"
ng-if="signUpForm.tel.$error.pattern&&signUpForm.tel.$touched">请输入有效手机号!</p>
</div>
<div class="form_group">
<label>请输入生日:</label>
<input type="text"
onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'{%y-18}-%M-%d'})"
class="form-control"
name="birth"
placeholder="请输入日期"
ng-model ="userdata.birth"
required="required"
onchange=""
/>
<p class="glyphicon glyphicon-ok birth"
ng-if="signUpForm.birth.$valid"></p>
<p class="error" ng-if="signUpForm.birth.$error&&signUpForm.birth.$tounched">请输入正确的生日</p>
</div>
<!--邮箱-->
<div class="form_group">
<label>请输入邮箱：</label>
<input type="email"
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"
/>
<p class="glyphicon glyphicon-ok emali"
ng-if="signUpForm.email.$valid"></p>
<p class="error" ng-if="signUpForm.email.$error.pattern&&signUpForm.email.$touched">请输入正确的邮箱</p>
<p class="error" ng-if="signUpForm.email.$touched&&signUpForm.email.$error.required">邮箱是必填项</p>
</div>
<div class="form_group">
<button class="btn btn-primary">注册</button>
</div>
</form>
</div>
</body>
</html>
然后是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框架
