js-表单验证

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>正则表达式案例--前端检验表单2--onsubmit</title>
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<script type="text/javascript">
   function RegCheck(val,regexp,error){
      if(regexp == 0 && pwd.value != val){
            alert(error);
            return false;
      }
    if(!regexp.test(val)){
        alert(error);
        return false;
    }else{
            return true;
    }
   }
   function checkform(){
     for (var i=0;i<form1.length ;i++ )
     {
        if(form1.elements[i].type == ‘text‘ || form1.elements[i].type == ‘password‘){
            var name =  form1.elements[i].name;
            var  val = form1.elements[i].value;

            if(val == ‘‘){
              alert("亲们,您还还有未填写的项目哦,请仔细检查");
              return false;
            }
            switch (name)
             {
                  case ‘user‘:
                                //alert(val);
                                var regexp = /^[a-zA-Z_][\w]+$/gi;
                                flag = RegCheck(val,regexp,‘用户名必须是以字母下划线开头,由字母数字下划线组成‘);
                                break;
                  case ‘zsname‘:
                                var regexp = /[\u4e00-\u9fa5]/gi;
                                flag = RegCheck(val,regexp,‘名字必须是中文‘);
                                break;
                  case ‘phone‘:

                                var regexp = /^(0|86-)?(13|15|18)(\d{9})$/gi;
                                 flag = RegCheck(val,regexp,‘电话的长度是11位数字‘);
                                break;
                  case ‘email‘:
                                //alert(val);[\w-][email protected]([a-z-]+\.)+(com|net|cn|org)?
                                var regexp = /^[\w-][email protected]([a-z-]+\.)+(com|net|cn|org)?$/gi;///^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
                                 flag = RegCheck(val,regexp,‘请按规定写正确的电子邮箱‘);
                                break;
                  case ‘pwd‘:
                                //alert(val);
                                var regexp = /^[a-zA-Z0-9]{9,}$/;
                                 flag = RegCheck(val,regexp,‘密码由字母数字组成的9位数以上‘);
                                break;
                  case ‘pwdtoo‘:
                                //alert(val);
                                 flag = RegCheck(val,0,‘两次输入的密码不一致‘);
                                break;

             }

        }
     }
     if(!flag){
       return false;
     }
   }
 </script>
 <!--
    <script>
    面向对象的话
       function checkform(){
           this.checks = function()
           {
                ........
           }
           this.reg_exp = function(){

           }
       }
       var checkform = new checkform();

</script>
 --->
</head>
<body >
   <form  id="form1"  onsubmit="return checkform()"> <!--面对对象的话 onsubmit="return checkform.checks()"-->
        <table border=‘1‘ cellspacing=‘0‘ cellpadding=‘9‘>
            <tbody>
                <tr>
                  <th colspan=‘3‘ style=‘color:#f69‘>用户注册</th>
                </tr>
                <tr>
                  <td>用户名:</td>
                  <td><input type=‘text‘ name=‘user‘ /></td>
                  <td>用户名必须是以字母下划线开头,由字母数字下划线组成</td>
                </tr>
                <tr>
                  <td>真实姓名:</td>
                  <td><input type=‘text‘ name=‘zsname‘ /></td>
                  <td>名字必须是中文</td>
                </tr>
                <tr>
                  <td>电话号码:</td>
                  <td><input type=‘text‘ name=‘phone‘ /></td>
                  <td>电话的长度是11位数字</td>
                </tr>
                <tr>
                  <td>电子邮箱:</td>
                  <td><input type=‘text‘ name=‘email‘ /></td>
                  <td>形如[email protected] [email protected] [email protected] ...........域名后缀暂时只能为com\cn\net\org</td>
                </tr>
                <tr>
                  <td>密码</td>
                  <td><input type=‘password‘ name=‘pwd‘ id=‘pwd‘ /></td>
                  <td>密码由字母数字组成的9位数</td>
                </tr>
                <tr>
                  <td>确认密码</td>
                  <td><input type=‘password‘ name=‘pwdtoo‘ /></td>
                  <td></td>
                </tr>
                <tr><td colspan=‘3‘ align=‘center‘><input type="image"  src=‘images/reg.jpg‘ style=‘height:40px;display:block;padding:10px;‘/><input type="reset"  style=‘background-image:url(images/reset.jpg); width:118px;height:40px;‘ value=‘‘/></td></tr>
                <!--主要原因是使用了<input type="image",而且放在了<form中。

<input type="image"标签类似<input type="submit",只要放在form中,执行该按钮就会提交页面。-->
            </tbody>
        <table>
   </form>
</body>
</html><!---在后面会慢慢丰富表单的验证  包括onfocus onblur 的结合验证  ---->
时间: 2024-10-17 10:06:23

js-表单验证的相关文章

JS表单验证类HTML代码实例

以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮点数验证.日期验证.邮件检查.网址验证.固定电话和手机号码验证.IP地址验证.邮编和QQ号码验证. MSN和身份证验证等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

jquery.validation.js 表单验证

jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 一导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jq

JS表单验证-12个常用的JS表单验证

最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6

简单的JS表单验证效果代码

简单的JS表单验证代码:表单验证几乎是不可缺少的,有的表单验证是在后台完成的,有的则是使用JavaScript在在前端完成基本的验证,这样可以有效的减轻服务器的压力,下面就介绍一下JS实现的最简单的表单验证.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://w

angular js 表单验证

1 <!doctype html> 2 <html ng-app="myapp"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{ 8 padding: 50px; 9 font-family: "微软雅黑"; 10 } 11 input{ 12 margi

jquery.validate.js表单验证

引用jquery封装好的js文件进行表单验证,提高了Web开发的效率.我写了一个验证的实例给大家展示一下. 实例中包含的验证方法还不全面,如果没有大家想要的可以通过 百度搜索关键:jquery.validate.js表单验证帮助文档来进行查阅. 引入的js文件: <script type="text/javascript" src="js/jquery-1.11.2.js"></script> <script type="te

js表单验证 插件jQuery-Validation-Engine-master

做项目基本离不开表单验证,想要美观,简洁,不占内存,用户体验效果好 所以我推荐一款js表单验证 因为我觉得这个挺好的,所以分享下 文档 下面也有下载的压缩包 https://github.com/posabsolute/jQuery-Validation-Engine 昵称做了ajax验证判断输入的用户是否存在 会提示先等待的信息...(我这里设置的时候是2秒) 如果用户名存在 会显示红色的气泡 如果用户名可以使用 会显示绿色的汽泡 还可以改变消息框的位置 如果弹出多个消息框 可以从上到下逐个提

简单的js表单验证框架

/** * 通常在我们的HTML页面表单中有大量的数据验证工作, * 免不了要写很多验证表单的js代码,这是一项非常繁琐 * 枯燥的工作.很多程序员也会经常遗漏这项工作.当然 * 一些JavaEE框架中有一些比较好的验证框架提供给我们 * 使用,但是也是需要很多繁琐的配置,页面查看起来也 * 不是很方便.一般程序员使用的也不多.所以写了这一 * 段JavaScript代码提供给大家使用.算是一个简单的 * JavaScript验证框架吧.使用起来很简单,配合下面几 * 种标签使用,能实现大多数表

JS表单验证示例

1 </<!DOCTYPE html> 2 <html> 3 <head> 4 <title>JS表单验证</title> 5 <meta http-equiv = "content-type" content="text/html; charset = utf-8 "> 6 <link rel="stylesheet" href="JSlogin.cs

js表单验证工具包

常用的js表单验证方法大全 1 /* 2 非空校验 : isNull() 3 是否是数字: isNumber(field) 4 trim函数: trim() lTrim() rTrim() 5 校验字符串是否为空: checkIsNotEmpty(str) 6 校验字符串是否为整型: checkIsInteger(str) 7 校验整型最小值: checkIntegerMinValue(str,val) 8 校验整型最大值: checkIntegerMaxValue(str,val) 9 校验整