关于表单验证

第一版:纯Js

<!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>注册表单</title>
    <script type="text/javascript">
    function checkSubmit()
    {
        /*获取值*/
        //用户名
        var name = document.getElementById("txtname").value;
        //性别      document.getElementsByName
        var sexs = document.getElementsByName("sex");
        //密码
        var pwd1 = document.getElementById("pwd1").value;
        //确认密码
        var pwd2 = document.getElementById("pwd2").value;
        //年龄
        var age = document.getElementById("seleage").value;
        //爱好
        var hobbys = document.getElementsByName("hobby");
        //简介
        var txtarea = document.getElementById("txtarea").value;

        /*验证*/
        if(name=="")
        {
            alert("用户名不能为空,请重新输入！");
            document.getElementById("txtname").focus();
            return false;
            }
        //获取单选框
        var sex = "";
        for(var i=0;i<sexs.length;i++)
        {
            if(sexs[i].checked)
            {
                sex = sexs[i].value;
                }
            }
        if(pwd1=="")
        {
            alert("密码不能为空！");
            document.getElementById("pwd1").focus();
            return false;
            }
        if(pwd1.length<2)
        {
            alert("密码必须大于等于2位！");
            return false;
            }

        if(pwd2=="")
        {
            alert("确认密码不能为空！");
            document.getElementById("pwd2").focus();
            return false;
            }
        if(pwd2!=pwd1)
        {
            alert("两次输入密码必须一致！");
            document.getElementById("pwd2").focus();
            return false;
            }
        if(pwd2.length<2)
        {
            alert("确认密码必须大于等于2位！");
            document.getElementById("pwd2").focus();
            return false;
            }

        //爱好
        if(hobbys.length==0){
            alert("爱好至少一项");
            return;
            }

        var hobby="";
        for(var i=0;i<hobbys.length;i++){
            if(hobbys[i].checked){
                hobby+=hobbys[i].value+"";}
            }
        //验证通过
        document.write("恭喜注册成功");
        document.write("<br />请保管好注册信息");
        document.write("<br />用户名:"+name);
        document.write("<br />性别:"+sex);
        document.write("<br />密码:"+pwd2);
        document.write("<br />年龄:"+age);
        document.write("<br />爱好:"+hobby);        

        if(txtarea==""){
                document.write("<br />简介:这人很懒,什么也没留下");
            }else{
                document.write("<br />简介:"+txtarea);
                }

        return true;
    }
    </script>
    </head>

    <body>
    <form name="myform" method="post" onSubmit="return checkSubmit();" action="#">
      <table width="500" border="1" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <th colspan="3">用户注册</th>
        </tr>
        <tr>
          <td width="100">用户名:</td>
          <td width="200"><input type="text" id="txtname" name="txtname"/></td>
          <td width="200">用户名不能为空</td>
        </tr>
        <tr>
          <td>性别:</td>
          <td>
            <input type="radio" name="sex" id="sexM" value="男"                     checked="checked"/>
            <label>男</label>
            <input type="radio" name="sex" id="sexF" value="女"                     />
            <label>女</label></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>密码:</td>
          <td><input type="password" id="pwd1" /></td>
          <td>密码必须大于等于2位</td>
        </tr>
        <tr>
          <td>确认密码:</td>
          <td><input type="password" id="pwd2" /></td>
          <td>确认密码必须与密码一致</td>
        </tr>
        <tr>
          <td>年龄:</td>
          <td><select id="seleage" name="seleage">
              <option value="10以下" selected="selected">10以下</option>
              <option value="10-20">10-20</option>
              <option value="20-40">20-40</option>
              <option value="40以上">40以上</option>
            </select></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>爱好:</td>
          <td><input type="checkbox" name="hobby" value="音乐" id="chkmusic"/>
            <label>音乐</label>
            <input type="checkbox" name="hobby" value="游戏" id="chkgame"/>
            <label>游戏</label>
            <input type="checkbox" name="hobby" value="其他" id="chkother"/>
            <label>其他</label></td>
          <td>爱好必须一项</td>
        </tr>
        <tr>
          <td height="100">简介:</td>
          <td><textarea id="txtarea" name="txtarea" rows="6"></textarea></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td align="center" colspan="3"><input name="submit" type="submit" value="提交"/>
            &nbsp;&nbsp;&nbsp;
            <input name="reset" type="reset" value="重置"/></td>
        </tr>
      </table>
    </form>
</body>
</html>

纯Js表单验证

第二版:正则表单式

<!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>注册表单</title>
<script type="text/javascript">
  /*
正则表达式已//双斜杠开始和结束，限制必须要以什么什么开头要在之前加^，限制必须要以什么什么结尾要在后面加$，例：/^正则$/*/
  var reg = {
    user:/^[a-zA-Z]\w{4,9}$/,
    //用来判断用户名，第一位不能为数字，也就是小写字母或者大写字母，后面的内容\w表示字符（数字字母下划线）
    //要求是5-10位字符，所以出去第一位，还需要4-9位的\w
    pwd:/^[\da-zA-Z]{6,18}$/,
    //用来判断密码，html结构中要求是数字字符6到18位，\d表示数字
    tel:/^1[34578]\d{9}$/,
    //用来判断电话号码，通常手机号第一位为1，第二位只可能出现3.4.5.7.8，后面剩下的9位数字随机
    mail:/^[1-9a-zA-Z_]\w*@[a-zA-Z0-9]+(\.[a-zA-Z]{2,})+$/,
    //用来判断邮箱，通常邮箱没有以0开头的，所以第一位为1-9数字或者小写字母或者大写字母，第二位开始任意字符
    //也可以只有第一位没有第二位，*表示至少0个，@后面同理，小写字母或者大写字母或者数字，.需要转意符，所以写成\.
  }
    //点后面通常是com或者cn或者com.cn，所以是小写字母或者大写字母至少两位
//电话号码：d{3}-d{8}|d{4}-d{7}  　
//腾讯QQ号：[1-9][0-9]{4,}  　　
//邮政编码：[1-9]d{5}(?!d)  　　
//身份证：d{15}|d{18}  　                 　　
//ip地址：d+.d+.d+.d+
//特定数字：
//正整数:^[1-9]d*$　 　
//负整数: ^-[1-9]d*$ 　
//整数:^-?[1-9]d*$ 　　
//匹配特定字符串：  　　
//26个英文字母: ^[A-Za-z]+$ 　　
//大写:^[A-Z]+$　  　　
//小写:^[a-z]+$  　　
//数字和字母^[A-Za-z0-9]+$　　　
//^w+$　　//匹配由数字、26个英文字母或者下划线组成的字符串
//数字：“^[0-9]*$”
//n位数字：“^d{n}$”  　　
//n位数字：“^d{n,}$”  　　
//m-n位的数字：“^d{m,n}$”  　　
//零和非零开头的数字：“^(0|[1-9][0-9]*)$”  　　
//有两位小数的正实数：“^[0-9]+(.[0-9]{2})?$”  　　
//1-3位小数的正实数：“^[0-9]+(.[0-9]{1,3})?$”  　　
//非零的正整数：“^+?[1-9][0-9]*$”  　　
//非零的负整数：“^-[1-9][0-9]*$”  　　
//长度为3的字符：“^.{3}$”  　　
//验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为：以字母开头，长度在6-18之间，  　　只能包含字符、数字和下划线。  　　
//是否含有^%&‘‘,;=?$"等字符：“[^%&‘‘,;=?$x22]+”  　　
//汉字：“^[u4e00-u9fa5],{0,}$”  　　
//Email地址：“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”  　　
//tURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”  　　
//电话号码：“^((d{3,4})|d{3,4}-)?d{7,8}$”
//12个月：“^(0?[1-9]|1[0-2])$”正确格式为：“01”-“09”和“1”“12”  　　
//一个月的31天：“^((0?[1-9])|((1|2)[0-9])|30|31)$”  　　正确格式为：“01”“09”和“1”“31”。  　　
//中文字符的正则表达式： [u4e00-u9fa5]  　　
//双字节字符(包括汉字在内)：[^x00-xff]  　　
//空行的正则表达式：n[s| ]*r  　　
//HTML标记的正则表达式：/<(.*)>.*|<(.*) />/  　　
//首尾空格的正则表达式：(^s*)|(s*$)  　　
//Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*  

    //regex正则表达式
//inputStr需要验证的字符串
//helpText提供信息提示的一个span标签
//helpMessage提示信息内容
//
/*function validateRegExp(regex,inputStr,helpText,helpMessage)
{
if(!regex.test(inputStr))
{
    if(helpText!=null)
    helpText.innerHTML=helpMessage;
    return false;
    }
    else{
    if(helpText!=null)
    helpText.innerHTML="";
    }
return true;
}*/

/*function validateDate(inputFild,helpText)
{
    //先检查参数是非空的
    if(!validateNonEmpty(inputFild,helpText))
    {
      return false;
    }
    return validateRegExp(/^\d{2}\/\d{2}\/\d{4}$/,inputFild,helpText,"请输入正确的日期格式");//调用正则验证方法
}*/

function checkMail()
{
　　var regMail=new RegExp(/^[0-9|A-z|_]{1,17}[@][0-9|A-z]{1,3}.(com)$/)
　  var mail = document.getElementById("mail").value;
　　if(!regMail.test(mail))
　　 {
       document.getElementById("mail").focus();
　　　　alert("请输入正确的邮箱地址");
      return false;
　　 }
}
</script>
</head>

<body>
<form name="myform" method="post" onSubmit="return checkSubmit();" action="#">
  <table width="500" border="1" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <th colspan="3">用户注册</th>
    </tr>
    <tr>
      <td width="100">用户名:</td>
      <td width="200"><input type="text" id="txtname" name="txtname" onblur=""/></td>
      <td width="200">用户名不能为空</td>
    </tr>
    <tr>
      <td>性别:</td>
      <td><input type="radio" name="sex" id="sexM" value="男"                     checked="checked"/>
        <label>男</label>
        <input type="radio" name="sex" id="sexF" value="女"                     />
        <label>女</label></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>密码:</td>
      <td><input type="password" id="pwd1" /></td>
      <td>密码必须大于等于2位</td>
    </tr>
    <tr>
      <td>确认密码:</td>
      <td><input type="password" id="pwd2" /></td>
      <td>确认密码必须与密码一致</td>
    </tr>
    <tr>
      <td>年龄:</td>
      <td><select id="seleage" name="seleage">
          <option value="10以下" selected="selected">10以下</option>
          <option value="10-20">10-20</option>
          <option value="20-40">20-40</option>
          <option value="40以上">40以上</option>
        </select></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>爱好:</td>
      <td><input type="checkbox" name="hobby" value="音乐" id="chkmusic"/>
        <label>音乐</label>
        <input type="checkbox" name="hobby" value="游戏" id="chkgame"/>
        <label>游戏</label>
        <input type="checkbox" name="hobby" value="其他" id="chkother"/>
        <label>其他</label></td>
      <td>爱好必须一项</td>
    </tr>
    <tr>
      <td>邮箱:</td>
      <td><input type="text" id="mail" onblur="checkMail()"/></td>
      <td></td>
    </tr>
    <tr>
      <td height="100">简介:</td>
      <td><textarea id="txtarea" name="txtarea" rows="6"></textarea></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td align="center" colspan="3"><input name="submit" type="submit" value="提交"/>
        &nbsp;&nbsp;&nbsp;
        <input name="reset" type="reset" value="重置"/></td>
    </tr>
  </table>
</form>
</body>
</html>

正则验证邮箱

原文地址：https://www.cnblogs.com/degui/p/9062545.html

时间： 2024-08-29 04:37:40

关于表单验证的相关文章

python :表单验证--对每一个输入框进行验证

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"/> <title>Title</title> <style> .error{ color

jquery插件，表单验证validation plugin的使用

笔记: 一.首先引入插件 <script type="text/javascript" src="js/jquery-1.10.0.js" ></script> <script type="text/javascript" src="js/jquery.validate-1.13.1.js" ></script> 列子:一个简单的登录表单验证 1 <form id=&quo

AngularJs 表单验证

看到一些博客说这个框架要过时了,但是还是学习了下,觉的很方便的一个框架,有空的同学可以看看,适合我们入门看,比较基础. 对于日常的开发来说,最常见的开发场景就是通过表单编辑数据,这里涉及的问题就是验证问题. angularjs 内置已经支持了常见的验证方式,可以轻松实现表单验证. 1. 绑定 为了方便,我们在 $scope 上下文对象上创建一个 model 来表示我们编辑的内容. $scope.model = { id : 8, name: "alice", email: "

表单验证&amp;lt;AngularJs&amp;gt;

经常使用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,仅仅要在输入字段元素上加入HTML5标记required就可以: <input type="text" required />   2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3.

AngularJS复习------表单验证

在AngularJS中能够将HTML5表单验证功能同自己的验证指令结合起来使用,这里介绍使用的核心功能. 使用表单验证,首先要确保表单的每个控件都有name属性 如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加novalidate标记. 必填项:只需要在输入字段元素上添加HTML5标记 required即可 最小长度:在输入字段上使用AngularJS指令ng-minlength="{number}" 最大长度:在输入字段上使用AngularJS指令ng-maxlength

java 表单验证

1.思路:通过表单选择器,表单属性过滤器提取每个表单提交的值,进行验证 2.实现:javascript通过 onSubmit()事件,判断,返回值false不提交,返回true提交,jquery通过submit()事件 3.表单验证常用的方法和事件 a:事件 onblur 失去焦点, onfocus获得焦点 b:方法 blur() 移开焦点触发方法参数 focus() 在文本域中设置焦点 触发方法参数 select()选取文本域中的内容触发方法参数 4.正则表达式: a:定义 var reg =

struts2官方 中文教程 系列十一：使用XML进行表单验证

在本教程中,我们将讨论如何使用Struts 2的XML验证方法来验证表单字段中用户的输入.在前面的教程中,我们讨论了在Action类中使用validate方法验证用户的输入.使用单独的XML验证文件让您可以内置到Struts 2框架的验证器. 贴个本帖的地址,以免被爬:struts2官方 中文教程 系列十一:使用XML进行表单验证  即 http://www.cnblogs.com/linghaoxinpian/p/6938720.html 下载本章节代码 为了使用户能够编辑存储在Person对

angularjs中的表单验证

angular对html原生的form做了封装,增加了很多验证功能 1.代码结构 <form name="signup_form" novalidate ng-submit="signupForm()"> <div> <label>用户名</label> <input type="text" placeholder="Name" name="name"

第一篇，js表单验证模板

下面是对于一个email的表单验证的基本模板<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style type="text/css" > .init{ border: 1px solid black; font-weight: bold; } .right{ border: 1px solid green; f

jQuery基础（常用插件 表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠）

1.表单验证插件--validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options}) 其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置.     2.表单插件--form 通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的option