js实现表单验证
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="application/javascript">
//验证码
function createCode(){
var code = Math.floor(Math.random()*9000+1000)
var span = document.getElementById("codeSpan")
span.innerHTML=code
return code
}
//验证用户名
function codeUser(){
return codedata("user",/^[\u4e00-\u9fa5]{2,4}$/)
}
//验证密码
function codePassword(){
return codedata("password",/^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+)$/)
return codePassword2()
}
//校验密码
function codePassword2(){
//获取第一次密码
var pwd =document.getElementById("password").value
//获取第二次密码
var pwd2 =document.getElementById("password2").value
//比较两次密码是否相同
var span =document.getElementById("password2Span")
if(pwd2==""||pwd2==null){
span.innerHTML="确认密码不能为空"
return false
}else if(pwd2=pwd){
span.innerHTML="ok"
return true
}else{
span.innerHTML="两次密码不一致"
return false
}
}
//验证手机号
function codePhone(){
return codedata("phone",/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/)
}
//验证邮箱
function codeEmail(){
return codedata("email",/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/)
}
//封装
function codedata(a,reg1){
//获取用户的用户信息
var user = document.getElementById(a).value
var span = document.getElementById(a+"Span")
var alt = document.getElementById(a).alt
//创建校验规则
var reg=reg1;
//校验
if(user==""|| user==null){
span.innerHTML=alt+"不能为空"
return false
}else if(reg.test(user)){
span.innerHTML=alt+"ok"
return true
}else{
span.innerHTML=alt+"不符合规则"
return false
}
} //验证籍贯
function codeCity(){
//获取用户选择的数据
var sel=document.getElementById("city").value; //获取span
var span=document.getElementById("citySpan");
//校验
if(sel!=0){
span.innerHTML="籍贯选择成功"
return true
}else{
span.innerHTML="籍贯不能为空"
return false
}
}
//验证爱好
function codeHobby(){
//获取爱好
var hobbys = document.getElementsByName("hobby")
var span = document.getElementById("hobbySpan")
for(var i =0;i<hobbys.length;i++){
if(hobbys[i].checked){
span.innerHTML="选择爱好成功"
return true
}
}
span.innerHTML="爱好至少选择一项"
return false
}
//校验是否同意公司协议
function checkAgree(){ document.getElementById("zc").disabled=!document.getElementById("agree").checked;
}
//提交判断
function checkSub(){
codeUser();
codePassword();
codePassword2();
codePhone();
codeEmail();
codeCity();
codeHobby();
return codeUser()&&codePassword()&&codePassword2()&&codePhone()&&codeEmail()&&codeCity()&&codeHobby();
}
</script>
</head>
<body onload="createCode()">
<div>
<form name="" action="demo01.html" onsubmit="return checkSub()">
用户名：<input type="text" name="user" id="user" value="" onblur="codeUser()" alt="用户名"><span id="userSpan"></span><br>
密码：<input type="password" name="password" id="password" onblur="codePassword()" alt="密码"><span id="passwordSpan"></span><br>
确认密码：<input type="password" name="password2" id="password2" onblur="codePassword2()"><span id="password2Span"></span><br>
手机号：<input type="text" name="phone" id="phone" alt="手机号" onblur="codePhone()" alt="手机号"><span id="phoneSpan"></span><br>
邮箱：<input type="text" name="email" id="email" alt="邮箱" onblur="codeEmail()"><span id="emailSpan"></span><br>
性别： 男<input type="radio" name="sex" id="man" checked="checked">
女<input type="radio" name="sex" id="feman"><br>
籍贯：<select id="city" name="city" onchange="codeCity()">
<option value="0">-请选择-</option>
<option value="1">广州</option>
<option value="2">上海</option>
<option value="3">北京</option>
</select><span id="citySpan"></span><br>
爱好：<input type="checkbox"name="hobby" value="lol" onclick="codeHobby()">LOL
<input type="checkbox"name="hobby" value="sleep" onclick="codeHobby()">睡觉
<input type="checkbox"name="hobby" value="eat" onclick="codeHobby()">吃饭
<input type="checkbox"name="hobby" value="listen" onclick="codeHobby()">听歌
<span id="hobbySpan"></span>
<br>
个人介绍:<textarea name="inc"></textarea><br>
验证码：<input type="text" name="code" id="code" ><span id="codeSpan" onclick="createCode()"></span><br>
<input type="checkbox"name="agree" id="agree" onclick="checkAgree()" >是否同意本公司协议<br>
<input type="submit" name="zc" id="zc" value="立即注册" disabled="disabled">
</form>
</div>
</body>
</html>
js实现表单验证的更多相关文章
- ★★★【卡法 常用js库】： js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度
[卡法 常用js库]: js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度 // +---------------------- ...
- js基础-表单验证和提交
基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...
- JS通用表单验证函数,基于javascript正则表达式
表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...
- JS简单表单验证
这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...
- 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证
一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...
- 原生js的表单验证
最近在学原生的js,把一些练手的代码往博客放一放,权当积累经验,若有错漏,或是觉得浅显,大家不要见怪. 这是一个原生js编写的简单的表单验证: <!DOCTYPE html><htm ...
- js——form表单验证
用js实现一个简易的表单验证 效果: 代码: <html> <head> <title>js校验form表单</title> <meta char ...
- 原生JS写表单验证提交功能
先上效果图: 表单的基础内容就是昵称判断.手机号判断.邮箱判断.身份证号码判断,这里是用到正则验证检验格式. 页面的表单写法就是一个form的提交.输入框用input来实现,输入内容用value来获取 ...
- 原生js制作表单验证，基本的表单验证方法
表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...
- JS实战 · 表单验证
思路: 1.定义页面 通过表格格式化表单: 表格行都有自己的背景颜色: 单元格中的数据(文本等)用div进行封装 ...
随机推荐
- ARM开发板挂载Ubuntu18.04主机的NFS共享文件夹
环境 ubuntu主机环境:Window10 下装VMWare下装的 ubuntu18.04LTS x64 IP 192.168.10.119 Window10下配置192.168.10该网段 开发板 ...
- Spring boot程序的部署及运行
将 spring boot 应用程序打包成 jar 包 我们使用 spring boot 的 maven 插件来构建管理整个应用程序,使用 mvn package 将应用程序打包成一个 jar 包 将 ...
- 超市管理系统C语言
登录系统 # include <stdio.h> //头文件 # include <string.h> //字符串头文件 # include <stdlib.h> ...
- js数组Array根据动态条件过滤
数据 [{ "name": "张三", "score": 153 }, { "name": "李四" ...
- 国内几大seo高手(夫唯,王通,久久)的技术分析
http://www.wocaoseo.com/thread-146-1-1.html 目前学习seo的人越来越多了,这种技术的普及和推广也在不断的扩大,先进的好的培训机构不断涌现,很多高水平老师都在 ...
- 滴滴Ceph分布式存储系统优化之锁优化
桔妹导读:Ceph是国际知名的开源分布式存储系统,在工业界和学术界都有着重要的影响.Ceph的架构和算法设计发表在国际系统领域顶级会议OSDI.SOSP.SC等上.Ceph社区得到Red Hat.SU ...
- POJ - 3037-Skiing(邻接表+Dijkstra)
Bessie and the rest of Farmer John's cows are taking a trip this winter to go skiing. One day Bessie ...
- 精选PDF版本书籍第一期
福利概述 精选JAVA必读书籍的PDF版本(来源于网络,侵删). Effective java 中文版(第2版) Head First 设计模式(中文版) Java并发编程的艺术 Java技术手册(第 ...
- 深入了解Netty【五】线程模型
引言 不同的线程模型对程序的性能有很大的影响,Netty是建立在Reactor模型的基础上,要搞清Netty的线程模型,需要了解一目前常见线程模型的一些概念. 具体是进程还是线程,是和平台或者编程语言 ...
- vue中使用柱状图
子组件 <template> <div> <div id="myChart" :style="{width: '400px', height ...