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进行封装 ...
随机推荐
- wsgi的environ变量
The environ dictionary is required to contain these CGI environment variables, as defined by the Com ...
- Robot Framework（7）——接口测试
一.准备工作 1.安装requests工具(2.22.0) 下载地址:https://pypi.org/project/requests/ 安装方式: 1>下载压缩文件,解压,目录切到解压目录, ...
- python爬虫之多线程、多进程+代码示例
python爬虫之多线程.多进程 使用多进程.多线程编写爬虫的代码能有效的提高爬虫爬取目标网站的效率. 一.什么是进程和线程 引用廖雪峰的官方网站关于进程和线程的讲解: 进程:对于操作系统来说,一个任 ...
- Java面试题（JVM篇）
JVM 194.说一下 jvm 的主要组成部分?及其作用? 类加载器(ClassLoader) 运行时数据区(Runtime Data Area) 执行引擎(Execution Engine) 本地库 ...
- vue再学习
day01 Vue 是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架 vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合 使用Vu ...
- 新手学习seo写原创文章的方法
http://www.wocaoseo.com/thread-102-1-1.html 前两天都是写自己公司克拉玛依电信公司年终活动和总结的事,今天继续学习seo技术,其实说难也难说容易也容易,关键的 ...
- VUE+ElementUI创建项目
1.官网下载node,安装node.js环境 安装完成后进入cmd,输入node -v和npm -v查看node和npm是否安装成功及对应的版本 2.全局安装vue-cli:cnpm install ...
- CSAPP bomb分析
CSAPP bomb分析 问题介绍 这是一个关于反汇编方面的问题,根据已有的二进制代码来推测程序中的特定条件,主要参考了以下各个博客: CSDN 1 CSDN 2 CSDN 3 CSDN 4 stac ...
- Welcome To CUG_YZL's cnblogs
Welcome To CUG_YZL's cnblogs My name is YZL, studied in China University of Geosciences Wuhan now.W ...
- jQuery入口函数与JavaScript入口函数的区别
jQuery 的入口函数是在 html 所有标签 (DOM) 都加载之后就会去执行 JavaScript 的 window.onload 时间是等到所有内容,包括外部图片之类的文件加载完成 ...