angularjs php登录验证,AngularJS注册表单验证的步奏详解

这次给大家带来AngularJS注册表单验证的步奏详解，AngularJS注册表单验证的注意事项有哪些，下面就是实战案例，一起来看一下。

//email验证

$(function(){

//input标签获取焦点/失去焦点时调用方法

$(":input[name='email']").blur(function(){

//获取input的内容

var email = $(this).val();

//给定输入内容的模板(email格式模板)

var reg = /\w+[@]{1}\w+[.]\w+/;

//将input的内容放入到模板中，进行判断

if(reg.test(email)){

//格式正确：输出“用户名可用”

$(":input[name='check-email']").val("用户名可用");

//声明正确时调用的图片

image1 = "";

//将图片放入到img标签中

$("#img1").attr("src", image1);

}else{

//格式错误：输出“请填写有效的Email地址”

$(":input[name='check-email']").val("请填写有效的Email地址");

//声明正确时调用的图片

image1 = "";

//将图片放入到img标签中

$("#img1").attr("src", image1);

}

});

});

//name验证

$(function(){

$(":input[name='name']").blur(function(){

var name = $(this).val();

//判断输入内容是大于四个字符

if(name.length > 4){

$(":input[name='check-name']").val("输入正确");

image2 = "";

$("#img2").attr("src", image2);

}else{

$(":input[name='check-name']").val("输入信息错误");

image2 = "";

$("#img2").attr("src", image2);

}

});

});

//password验证-第一次

$(function(){

$(":input[name='password-one']").blur(function(){

var name = $(this).val();

//判断密码是否大于6个字符

if(name.length > 6){

$(":input[name='check-password-one']").val("密码可用");

image3 = "";

$("#img3").attr("src", image3);

}else{

$(":input[name='check-password-one']").val("密码不可用");

image3 = "";

$("#img3").attr("src", image3);

}

});

});

//password验证-第二次

$(function(){

$(":input[name='password-two']").blur(function(){

var name1 = $(":input[name='password-one']").val();

var name2 = $(this).val();

//首先判断密码是否大于6个字符

if(name2.length > 6){

//然后判断两次密码是否一致

if(name2 == name1){

$(":input[name='check-password-two']").val("密码可用");

image4 = "";

$("#img4").attr("src", image4);

}else{

$(":input[name='check-password-two']").val("密码不可用");

image4 = "";

$("#img4").attr("src", image4);

}

}else{

$(":input[name='check-password-two']").val("密码不可用");

image4 = "";

$("#img4").attr("src", image4);

}

});

});

img{width: 15px; height: 15px}

.left{width: 200px; text-align: right}

.right{width: 400px}

.bjs{background-color: limegreen}

.btn{margin: 20px 0 0 300px}

以下均为必填项

//table表格样式：边框为1，内部填充为10，外部填充为0

请输入您的Email地址：
设置您在当当网的昵称：
设置密码：
再次输入您设置的密码：

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：