AngularJS实现注册表单验证功能
本文为大家分享了案例: 注册表单验证，供大家参考，具体内容如下
需要使用的两张图片：
dui.gif：
cuo.gif：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.1.12.4.js"></script>
<!--jquery样式-->
<script type="text/javascript">
//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 = "dui.gif";
//将图片放入到img标签中
$("#img1").attr("src", image1);
}else{
//格式错误：输出“请填写有效的Email地址”
$(":input[name='check-email']").val("请填写有效的Email地址");
//声明正确时调用的图片
image1 = "cuo.gif";
//将图片放入到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 = "dui.gif";
$("#img2").attr("src", image2);
}else{
$(":input[name='check-name']").val("输入信息错误");
image2 = "cuo.gif";
$("#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 = "dui.gif";
$("#img3").attr("src", image3);
}else{
$(":input[name='check-password-one']").val("密码不可用");
image3 = "cuo.gif";
$("#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 = "dui.gif";
$("#img4").attr("src", image4);
}else{
$(":input[name='check-password-two']").val("密码不可用");
image4 = "cuo.gif";
$("#img4").attr("src", image4);
}
}else{
$(":input[name='check-password-two']").val("密码不可用");
image4 = "cuo.gif";
$("#img4").attr("src", image4);
}
});
});
</script>
<!--css样式-->
<style type="text/css">
img{width: 15px; height: 15px}
.left{width: 200px; text-align: right}
.right{width: 400px}
.bjs{background-color: limegreen}
.btn{margin: 20px 0 0 300px}
</style>
</head>
<body>
<h4 style="color: red">以下均为必填项</h4>
<form>
//table表格样式：边框为1，内部填充为10，外部填充为0
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td class="left">请输入您的Email地址：</td>
<td class="right">
<input class="bjs" name="email">
<img id="img1" src="cuo.gif" />
<input type="text" name="check-email" style="border: 0px" />
</td>
</tr>
<tr>
<td class="left">设置您在当当网的昵称：</td>
<td class="right">
<input class="bjs" name="name">
<img id="img2" src="cuo.gif" />
<input type="text" name="check-name" style="border: 0px" />
</td>
</tr>
<tr>
<td class="left">设置密码：</td>
<td class="right">
<input class="bjs" name="password-one">
<img id="img3" src="cuo.gif" />
<input type="text" name="check-password-one" style="border: 0px" />
</td>
</tr>
<tr>
<td class="left">再次输入您设置的密码：</td>
<td class="right">
<input class="bjs" name="password-two">
<img id="img4" src="cuo.gif" />
<input type="text" name="check-password-two" style="border: 0px" />
</td>
</tr>
</table>
<input class="btn" type="button" value="注册" />
</form>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
mvc C# JavaScript LigerUI oracle实现用户的注册、登陆验证、登陆
一.登录数据库,在数据库中创建表User00,并且插入数据. 表的字段分别为: Id(编号).Name(姓名).Grid(级别).Score(积分).Password(密码).Age(年龄).Code(邀请码).(其中编号是自动编号) 部分命令如下: select * from User00; /*查询User00*/ insert into User00 values('one','优',10000,'123',24); /*插入一行数据*/ update User00 set Grid='优
-
js正则表达式注册页面表单验证
正则表达式方式的验证方式,这个验证比较标准而且比较全面,不过也是通过点击提交按钮才进行验证,本实例可以这样验证,具体内容如下 也可以这样验证 具体代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表单验证类Validator v1</title> <style&g
-
javascript制作的简单注册模块表单验证
一个注册框 进行表单验证处理 如图 有简单的验证提示功能 代码思路也比较简单 输入框失去焦点时便检测,并进行处理 表单具有 onsubmit = "return check()"行为,处理验证情况 点击提交表单按钮时,进行最终的验证,达到是否通过表单提交的请求. 先是最基本的html+css部分 <style type="text/css"> body{margin:0;padding: 0;} .login{position:relative;mar
-
原生js验证简洁注册登录页面
序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 1 sign_up.html 注册表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sign-up</title> <link rel="stylesheet" href="css
-
Ionic+AngularJS实现登录和注册带验证功能
登录: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <li
-
js注册时输入合法性验证方法
本文实例为大家分享了js正则表达式验证输入合法性的具体代码,供大家参考,具体内容如下 // 验证用户名,只允许 字母 数字 下划线 中文 //在input元素后面增加一个span元素,提示 function confirmName(){ var name=document.getElementById("user_name"); name.onblur=function(){ if((name.value).length!=0){ reg=/^[\u4e00-\u9fa5_a-zA-Z
-
JS实现用户注册时获取短信验证码和倒计时功能
在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时. 效果如下: <div class="user-form"> <form action="{{ path('zm_member_register') }}" method="post"> <div class="form-list"> <label class="register-label"&g
-
js实现登录注册框手机号和验证码校验（前端部分）
开发的很多场景中都会用到手机号的校验和验证码的校验,具体实现如下 <div> <input type="text" name="phonenumber" placeholder="请输入您的手机号码" /> <input type="text" name="verify" placeholder="请输入验证码" /><input type=&q
-
JS+jQuery实现注册信息的验证功能
用JS和JQuery实现的效果是一样的. HTML代码 <legend> 请填写注册信息</legend> <form action="index.html" method="post"> <table style="text-align: right;"> <tr> <td>用户名:</td> <td><input type="tex
-
php用户注册页面利用js进行表单验证具体实例
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht