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表单验证的例子的更多相关文章

  1. javascript:正则表达式、一个表单验证的例子

    本文内容: 正则表达式 正则表达式的使用方法 正则表达式的特殊匹配字符 正则表达式修饰符 利用正则表达式进行表单验证的例子 首发日期:2018-05-13 正则表达式: 正则表达式的使用方法: 首先创 ...

  2. JavaScript表单验证年龄

    JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现. //检查年龄 function isAge(str){ var mydate=new Date; var now=m ...

  3. 前端工具 - 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  4. JavaScript表单验证和正则表达式

    JavaScript表单验证 分为四类: 1.非空验证 常用于用户名等 2.相等验证 常用于验证两次输入的密码 3.范围验证 常用于年龄等 4.正则验证 用于手机号,邮箱号等 以下是实例: <! ...

  5. 使用 WTForms 进行表单验证的例子

    #使用 WTForms 进行表单验证的例子 from wtforms import Form from wtforms import BooleanField from wtforms import ...

  6. 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  7. JavaScript 表单验证入门

    JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单 ...

  8. JavaScript 表单验证 案例

    JavaScript 表单验证 案例 版权声明:未经授权,严禁转载!   编写 HTML 文件,搭建主体界面 <html> <head> <meta charset=&q ...

  9. 10个强大的Javascript表单验证插件推荐

    创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...

随机推荐

  1. Andrdoid中对应用程序的行为拦截实现方式之----从Java层进行拦截

    致谢: 感谢 简行之旅的这篇blog:http://blog.csdn.net/l173864930/article/details/38455951,这篇文章是参考这篇blog的进行一步一步操作的, ...

  2. One Switch for Mac 一键切换系统各项功能

        One Switch 是火球工作室推出的最新 Mac效率软件,它在 Menubar 菜单里集成了隐藏桌面(图标).切换 Dark Mode.保持亮屏.开启屏保的一键切换按钮,将以往这些以独立小 ...

  3. 转载：@RequestParam @RequestBody @PathVariable 等参数绑定注解详解

    转载自:https://blog.csdn.net/walkerjong/article/details/7946109#commentBox   因为写的很好很全,所以转载过来 引言:接上一篇文章, ...

  4. 有关于css的四种布局

    四种布局 (1).左右两侧,左侧固定宽度200px, 右侧自适应占满. (2).左中右三列,左右个200px固定,中间自适应占满. (3).上中下三行,头部200px高,底部200px高,中间自适应占 ...

  5. 一起探讨下POST、GET请求

    以下的讨论都是基于java和Spring MVC,主要记录自己的一些练习心得. 做web网站开发HTTP请求必不可少,一直在使用写好的Utils没有考虑过如何以及为什么,现在闲下来想着捋一捋java的 ...

  6. spring相关注解

    spring相关注解: 使用之前需要<context:annotation-config/>在配置文件中启用 @Required 应用于类属性的set方法,并且要求该属性必须在xml容器里 ...

  7. js关闭当前页面清除session

    js关闭当前页面清除session 普通页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  8. 研究一下phpspider

    官方文档 1.下载 官方github下载地址: https://github.com/owner888/phpspider 下载地址可能无法访问,这里提供一个网盘下载地址: 链接: https://p ...

  9. Java中Iterator用法整理

    迭代器(Iterator) 迭代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结构.迭代器通常被称为“轻量级”对象,因为创建它的代价小. Java中的I ...

  10. ACM-ICPC 比赛环境的使用

    ACM-ICPC 现场赛不同的赛站可能比赛环境不同,不过一般都是 Ubuntu 系统.附带的软件可能略有不同,可能会有使用习惯的差异导致效率下降或者无法运行代码,但是在终端下编译运行代码都是相同的.本 ...