用js实现一个简易的表单验证

效果：



代码:

<html>

	<head>

		<title>js校验form表单</title>

		<meta charset="UTF-8" />

		<!--声明css代码域-->

		<style type="text/css">

			/*设置背景图片*/

			body {

				background-image: url(img/1.jpg);

				background-size: cover;

			}


/*设置tr样式*/

			tr {

				height: 40px;

			}


/*设置div样式*/

			#showdiv {

				border: solid 1px #FF0000;

				border-radius: 10px;

				width: 500px;

				margin: auto;

				margin-top: 40px;

			}


/*设置table*/

			table {

				margin: auto;

				color: white;

			}


span {

				font-size: 13px;

			}


#codeSpan {

				font-size: 20px;

			}

		</style>

		<!--声明js代码域-->

		<script type="text/javascript">

			//常见验证码

			function createCode() {

				//创建随机四位数字

				var code = Math.floor(Math.random() * 9000 + 1000);

				//获取元素对象

				var span = document.getElementById("codeSpan");

				//将数字存放到span中

				span.innerHTML = code;

			}

			//验证用户名

			function checkUname() {

				//获取用户的用户名信息

				var uname = document.getElementById("uname").value;

				//创建校验规则

				var reg = /^[\u4e00-\u9fa5]{2,4}$/

				//获取span对象

				var span = document.getElementById("unameSpan");

				//开始校验

				if (uname == "" || uname == null) {

					//输出校验结果

					span.innerHTML = "用户名不能为空";

					span.style.color = "red";

					return false;

				} else if (reg.test(uname)) {

					//输出校验结果

					span.innerHTML = "用户名ok";

					span.style.color = "green";

					return true;

				} else {

					//输出校验结果

					span.innerHTML = "用户名不符合规则";

					span.style.color = "red";

					return false;

				}


}

			//验证密码

			function checkPwd() {

				//获取用户的密码信息

				var pwd = document.getElementById("pwd").value;

				//创建校验规则

				var reg = /^[a-z]\w{5,7}$/;

				//获取span对象

				var span = document.getElementById("pwdSpan");

				//开始校验

				if (pwd == "" || pwd == null) {

					//输出校验结果

					span.innerHTML = "*密码不能为空";

					span.style.color = "red";

					return false;

				} else if (reg.test(pwd)) {

					//输出校验结果

					span.innerHTML = "*密码ok";

					span.style.color = "green";

					return true;

				} else {

					//输出校验结果

					span.innerHTML = "*密码格式不正确";

					span.style.color = "red";

					return false;

				}

				checkPwd2();

			}

			//校验确认密码

			function checkPwd2() {

				//获取第一次密码

				var pwd = document.getElementById("pwd").value;

				//获取确认密码

				var pwd2 = document.getElementById("pwd2").value;

				//获取span对象

				var span = document.getElementById("pwd2Span");

				//比较两次密码是否相同

				if (pwd2 == "" || pwd2 == null) {

					span.innerHTML = "确认密码不能为空";

					span.style.color = "red";

					return false;

				} else if (pwd == pwd2) {

					span.innerHTML = "确认密码ok";

					span.style.color = "green";

					return true;

				} else {

					span.innerHTML = "两次密码不一致";

					span.style.color = "red";

					return false;

				}

			}

			//校验手机号

			function checkPhone() {

				return checkField("phone", /^1[3,4,5,7,8]\d{9}$/);

			}

			//校验邮箱

			function checkMail() {

				return checkField("mail", /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/)


}

			//校验籍贯

			function checkAddress() {

				//获取用户选择的数据

				var sel = document.getElementById("address").value;

				//获取span

				var span = document.getElementById("addressSpan");

				//校验

				if (sel != 0) {

					span.innerHTML = "籍贯选择成功";

					span.style.color = "green";

					return true;

				} else {

					span.innerHTML = "籍贯不能为请选择";

					span.style.color = "red";

					return false;

				}


}

			//校验技能

			function checkFav() {

				//获取所有的技能

				var favs = document.getElementsByName("fav");

				//获取span

				var span = document.getElementById("favSpan");

				//遍历

				for (var i = 0; i < favs.length; i++) {

					if (favs[i].checked) {

						span.innerHTML = "技能选择成功";

						span.style.color = "green";

						return true;

					}

				}


span.innerHTML = "技能至少选则一项";

				span.style.color = "red";

				return false;


}


//校验验证码

			function checkCode() {

				//获取提示语的span

				var span = document.getElementById("checkCodeSpan");

				//获取已经生成的验证码的span

				var span2 = document.getElementById("codeSpan");

				var code = span2.innerHTML;

				//获取输入值

				var inp = document.getElementById("code").value;

				//开始校验

				if (code == inp) {

					//输出校验结果

					span.innerHTML = "*验证码正确";

					span.style.color = "green";

					return true;

				} else {

					//输出校验结果

					span.innerHTML = "*验证码不正确";

					span.style.color = "red";

					return false;

				}

			}

			//校验是否同意公司协议

			function checkAgree() {

				document.getElementById("sub").disabled = !document.getElementById("agree").checked;

			}

			//提交判断

			function checkSub() {

				checkUname();

				checkPwd();

				checkPwd2();

				checkPhone();

				checkMail();

				checkAddress();

				checkFav();

				checkCode();

				return checkUname() && checkPwd() && checkPwd2() && checkPhone() && checkMail(
												


											
js——form表单验证的更多相关文章
	

    
								
  1. form表单验证-Javascript
		
    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...
    
		
    2. 
						
  2. django之form表单验证
		
    django中的Form一般有两种功能: 输入html 验证用户输入 #!/usr/bin/env python # -*- coding:utf- -*- import re from django ...
    
		
    3. 
						
  3. python_way day19 HTML-day5 （form表单验证，CSRF,cookie，session,缓存）
		
    python-way day19 1. dJango的form表单验证 2.CSRF 跨站请求伪造 3.cookie,session 4.缓存 一,django表单验证功能 1.django验证基础: ...
    
		
    4. 
						
  4. Day19 Django之Form表单验证、CSRF、Cookie、Session和Model操作
		
    一.Form表单验证 用于做用户提交数据的验证1.自定义规则 a.自定义规则(类,字段名==html中的name值)b.数据提交-规则进行匹配代码如下: """day19 ...
    
		
    5. 
						
  5. [php基础]PHP Form表单验证:PHP form validator使用说明
		
    在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...
    
		
    6. 
						
  6. 基于Bootstrap+jQuery.validate Form表单验证实践
		
    基于Bootstrap jQuery.validate Form表单验证实践 项目结构 :     github 上源码地址:https://github.com/starzou/front-end- ...
    
		
    7. 
						
  7. Bootstrap学习总结笔记（24）-- 基于BootstrapValidator的Form表单验证
		
    Form表单进行数据验证是十分必要的,我们可以自己写JS脚本或者使用JQuery Validate 插件来实现.对于Bootstrap而言,利用BootstrapValidator来做Form表单验证 ...
    
		
    8. 
						
  8. vue elementui form表单验证
		
    最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
    
		
    9. 
						
  9. Django（5） session登录注销、csrf及中间件自定义、django Form表单验证（非常好用）
		
    一.Django中默认支持Session,其内部提供了5种类型的Session供开发者使用: 数据库(默认) 缓存 文件 缓存+数据库 加密cookie 1.数据库Session 1 2 3 4 5  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. python日常题目小练习
			
    1.使用while循环输出1 2 3 4 5 6 8 9 10 i=0 while i<10: i+=1 if i==7: continue print(i) 结果: 2.求1-100的所有数的 ...
    
			
    2. 
						
  2. [QT] QT5.12 HTTPS请求  TLS initialization failed
			
    #前言 接触到了Qt的网络编程 然后尝试对一个http页面请求获取源码 是可以的 但是当对https界面发出请求的时候总是错误 TLC什么的初始化失败 百度也是没有结果 然后网上各种方法 比如说编译O ...
    
			
    3. 
						
  3. window.onresize事件
			
    定义和用法 onresize 事件会在窗口或框架被调整大小时发生. 语法 In HTML: <element onresize="SomeJavaScriptCode"> ...
    
			
    4. 
						
  4. java 事务解释。
			
    面试的时候,面试人员总喜欢问在spring中, 1. 如果一个主线程上有一个事务,在事务中开启了一个线程.子线程跑出异常,对主线程有没有影响,或者主线程产生异常对子线程有没有影响. 这个时候,你只要记 ...
    
			
    5. 
						
  5. IDEA & MAVEN配置代理（没用）
			
    1. IDEA配置代理: 2. maven配置代理: 在maven中配置代理,主要配置编辑~/.m2/settings.xml文件的<proxies> socks5类型: <id&g ...
    
			
    6. 
						
  6. Mac 下 vim 常用命令
			
    vim 三种模式:命令模式.插入模式.底线命令模式. 切换模式: 命令模式: 启动 vim 进入命令模式: i 切换到插入模式,以输入字符. x   删除当前光标所在处的字符. :   切换到底线命令 ...
    
			
    7. 
						
  7. iOS 开发中常用的排序（冒泡、选择、快速、插入、希尔、归并、基数）算法
			
    1.冒泡排序: 冒泡算法是一种基础的排序算法,这种算法会重复的比较数组中相邻的两个元素.如果一个元素比另一个元素大(小),那么就交换这两个元素的位置.重复这一比较直至最后一个元素.这一比较会重复n-1 ...
    
			
    8. 
						
  8. vue项目中vant tab改变标签颜色
			
    找了几种方法,只有下面这个方法是生效的: <van-tabs v-model="active" sticky title-active-color="#144a9e ...
    
			
    9. 
						
  9. python3  getopt用法
			
    python channel_builder.py -s /Users/graypn/ -d /Users/graypn/Documents -m 7 --out=report/xx.html 参数也 ...
    
			
    10. 
						
  10. java集合体系结构总结
			
    好,首先我们根据这张集合体系图来慢慢分析.大到顶层接口,小到具体实现类. 首先,我想说为什么要用集合?简单的说:数组长度固定,且是同种数据类型.不能满足需求.所以我们引入集合(容器)来存储任意数据类型 ...
    
			
    11.