javascript表单验证的例子
function checkUsername(){
//对username的内容进行验证。
//要求：首字符是字母或下划线，其他由下划线字母数字组成，共4-20位
var inputOb=document.getElementsByName('username')[0];
var v=inputOb.value;
if(/^[_a-zA-Z]\w{3,19}$/.test(v)){
showMessage("用户名正确",'username');
return true;
}else{
showMessage("用户名错误",'username');
return false;
}
}
function checkPassword(){
//要求：数字字母_ 6-20
var v=document.getElementsByName('pw')[0].value;
if(/^\w{6,20}$/.test(v)){
showMessage("密码正确",'pw');
return true;
}else{
showMessage("密码错误",'pw');
return false;
}
}
function checkRePassword(){
//两次输入密码是否一致
var v=document.getElementsByName('pw')[0].value;
var v1=document.getElementsByName('pw1')[0].value;
if(v==v1){
showMessage('两次密码一致','pw1');
return true;
}else{
showMessage('两次密码不一致','pw1');
return false;
}
}
function checkEmail(){
//得到email框的内容
var v=document.getElementsByName('email')[0].value;
//验证，提示
if(/^\w+@\w+(\.\w+)+$/.test(v)){
showMessage('邮箱格式正确','email');
return true;
}else{
showMessage('邮箱格式错误','email');
return false;
}
}
function checkTel(){
//得到email框的内容
var v=document.getElementsByName('tel')[0].value;
//验证，提示
if(/^1[34578]\d{9}$/.test(v)){
showMessage('电话格式正确','tel');
return true;
}else{
showMessage('电话格式错误','tel');
return false;
}
}
function checkForm(){
if(checkUsername()&&checkPassword()&&checkRePassword()&&checkEmail()&&checkTel()){
return true;
}else{
return false;
}
}
//信息提示
function showMessage(message,elementName){
//创建div
var divOb=document.createElement('div');
divOb.innerHTML=message;
//获取elementName的右上角位置
var cOb=document.getElementsByName(elementName)[0];
var T=cOb.offsetTop;
var L=cOb.offsetLeft+cOb.offsetWidth;
//把td中的div全部去掉
var divList=cOb.parentNode.getElementsByTagName('div');
for(var i=divList.length-1;i>=0;i--){
cOb.parentNode.removeChild(divList[i]);
}
cOb.parentNode.insertBefore(divOb,cOb);
cOb.parentNode.style.position='relative';
divOb.style.position='absolute';
divOb.style.zIndex=1000;
divOb.style.left=L+"px";
divOb.style.top=T+"px";
divOb.style.border="1px solid orange"
divOb.style.padding='1px 3px';
divOb.style.fontSize="12px";
}
表单
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<style type="text/css">
*{padding:0;margin:0;}
table{margin:20px auto;}
</style>
<script type="text/javascript" src="js/checkForm.js"></script>
</head>
<body>
<form action="save.php" method="post" onsubmit="return checkForm();">
<table border=0 cellpadding=0 cellspacing=0 width=90% align="center">
<tr>
<td height="60" colspan="2">
<h1>会员注册</h1>
</td>
</tr>
<tr>
<td class="c1">用户名：</td>
<td><input onchange="checkUsername();" type="text" name="username"/></td>
</tr>
<tr>
<td class="c1">密码：</td>
<td><input onchange="checkPassword();" type="password" name="pw"/></td>
</tr>
<tr>
<td class="c1">重复密码：</td>
<td><input onchange="checkRePassword();" type="password" name="pw1"/></td>
</tr>
<tr>
<td class="c1">邮箱：</td>
<td><input onchange="checkEmail();" type="text" name="email"/></td>
</tr>
<tr>
<td class="c1">性别：</td>
<td>
<input type="radio" name="sex" value="男"/>男<br/>
<input type="radio" name="sex" value="女"/>女<br/>
<input type="radio" name="sex" value="保密" checked="checked"/>保密
</td>
</tr>
<tr>
<td class="c1">爱好：</td>
<td>
<input type="checkbox" name="like[]" value='1'/>篮球<br/>
<input type="checkbox" name="like[]" value='2'/>足球<br/>
<input type="checkbox" name="like[]" value='3'/>羽毛球
</td>
</tr>
<tr>
<td class="c1">电话：</td>
<td><input onchange="checkTel()" type="text" name="tel"/></td>
</tr>
<tr>
<td class="c1">简介：</td>
<td>
<textarea name="intro" cols="60" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"/></td>
</tr>
</table>
</form>
</body>
</html>
javascript表单验证的例子的更多相关文章
- javascript:正则表达式、一个表单验证的例子
本文内容: 正则表达式 正则表达式的使用方法 正则表达式的特殊匹配字符 正则表达式修饰符 利用正则表达式进行表单验证的例子 首发日期:2018-05-13 正则表达式: 正则表达式的使用方法: 首先创 ...
- JavaScript表单验证年龄
JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现. //检查年龄 function isAge(str){ var mydate=new Date; var now=m ...
- 前端工具 - 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- JavaScript表单验证和正则表达式
JavaScript表单验证 分为四类: 1.非空验证 常用于用户名等 2.相等验证 常用于验证两次输入的密码 3.范围验证 常用于年龄等 4.正则验证 用于手机号,邮箱号等 以下是实例: <! ...
- 使用 WTForms 进行表单验证的例子
#使用 WTForms 进行表单验证的例子 from wtforms import Form from wtforms import BooleanField from wtforms import ...
- 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- JavaScript 表单验证入门
JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单 ...
- JavaScript 表单验证 案例
JavaScript 表单验证 案例 版权声明:未经授权,严禁转载! 编写 HTML 文件,搭建主体界面 <html> <head> <meta charset=&q ...
- 10个强大的Javascript表单验证插件推荐
创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...
随机推荐
- 【Flutter学习】可滚动组件之SingleChildScrollView
一,概述 SingleChildScrollView类似于Android中的ScrollView,它只能接收一个子Widget.定义如下: 二,构造函数 const SingleChildScroll ...
- 大碗宽面Beta迭代阶段第十二周会议记录
本周一晚上我们在熟悉的宿舍楼一楼大厅进行了本周的小组会议. 对于上周的任务,前端的同学修改统一了导航栏和footer,在课程评价界面中添加了“添加评论”功能,其中含有,是否修改过该课程的单选框,评论, ...
- 在ios微信中提交form，php端收不到参数的问题
今天做h5页面时,微信浏览器中提交form表单,发现php端收不到post过来的参数,在普通浏览器中可以,安卓微信也可以,$_POST,$_GET,$_REQUEST等方式都不行. 后来,把form表 ...
- Android获取手机和系统版本等信息的代码
有时候需要统计手机的型号和版本号,利用程序可以获取到相应的手机信息,对比两部手机发现,厂商不同,某个信息显示方式也不尽相同,具体见: String phoneInfo = "Product: ...
- python 去除字符串两端字符串
转载:http://blog.sina.com.cn/s/blog_940224600100w8l0.html Python中的strip用于去除字符串的首位字符,同理,lstrip用于去除左边的字符 ...
- 52、saleforce 第一篇
View the Schema 1.点击setup 2.在QuickFind and Search中输入Schema Builder 先点击clear all 去除所有现实的UML,然后选择Line_ ...
- 用 Flask 来写个轻博客 (7) — (M)VC_models 的关系(many to many)
目录 目录 前文列表 扩展阅读 前期准备 多对多 使用样例 一直在使用的 session 前文列表 用 Flask 来写个轻博客 (1) - 创建项目 用 Flask 来写个轻博客 (2) - Hel ...
- JSON.stringify,JSON.parse方法
var obj={name:'zhangsan',age:'18'};/** js对象--->JSON字符串* JSON.stringify(js对象) --转化为--> JSON字符串* ...
- upc组队赛5 Bulbs
Bulbs 题目描述 Greg has an m × n grid of Sweet Lightbulbs of Pure Coolness he would like to turn on. Ini ...
- Python List reverse() 与list[::-1]
reverse() https://www.runoob.com/python/att-list-reverse.html list[::-1] https://blog.csdn.net/usern ...