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. 云数据库POLARDB产品解读之二：如何做到高性价比

    现在做任何事情都要看投入产出比,对应到数据库上其实就是性价比.POLARDB作为一款阿里自研数据库,经常被问的问题是:性能怎么样?能不能支撑我的业务?价格贵不贵?很显然,在早期调研阶段,对稳定性.可靠 ...

  2. 初识sed和gwak

    一.sed编辑器 sed命令的格式如下: sed options script file 选项 -e script        在处理输入时,将script中指定的命令添加到已有的命令中 -f fi ...

  3. The First Scrum Meeting!

    第六周会议 情况简述 会议概要:明确需求,确定目标 参与人员:詹晓宇  谢赛金  熊紫仁  徐翠萍  周娟  孙尚煜 讨论时间:2019-10-24 会议地点:六区研讨性教室 具体内容 根据之前做的P ...

  4. paper 148: Face Databases

    持续更新ing~ 1.人脸检测数据库: (1999年发布)CMU+MIT:180幅图像,共734个人脸.包含3个正面人脸测试子集和一个旋转人脸测试子集,其中正面人脸测试子集有130幅图像,共511个人 ...

  5. 线程同步（基于java）

    java线程 同步与异步 线程池 1)多线程并发时,多个线程同时请求同一个资源,必然导致此资源的数据不安全,A线程修改了B线 程的处理的数据,而B线程又修改了A线程处理的数理.显然这是由于全局资源造成 ...

  6. Blazor 组件库 Blazui 开发第一弹【安装入门】

    标签: Blazor Blazui文档 Blazui 传送门 Blazor 组件库 Blazui 开发第一弹[安装入门]https://www.cnblogs.com/wzxinchen/p/1209 ...

  7. PHP 遍历目录下面的所有文件及子文件夹

    //遍历文件夹下面所有文件及子文件夹 function read_all_dir ( $dir ){ $result = array(); $handle = opendir($dir);//读资源 ...

  8. （1.3）学习笔记之mysql体系结构（C/S整体架构、内存结构、物理存储结构、逻辑结构）

    目录 1.学习笔记之mysql体系结构(C/S架构) 2.mysql整体架构 3.存储引擎 4.sql语句处理--SQL层(内存层) 5.服务器内存结构 6.mysql如何使用磁盘空间 7.mysql ...

  9. leetcode.矩阵.566重塑矩阵-Java

    1. 具体题目 给出一个由二维数组表示的矩阵,以及两个正整数r和c,分别表示想要的重构的矩阵的行数和列数.重构后的矩阵需要将原始矩阵的所有元素以相同的行遍历顺序填充.如果具有给定参数的reshape操 ...

  10. SQL中to_char方法的应用

    1.取得当前日期是本月的第几周 SQL> select to_char(sysdate,'YYYYMMDD W HH24:MI:SS') from dual; ----------------- ...