input的表单验证(不断更新中~~)

1 手机号验证

<input type="tel" id="phone" name="phone" placeholder="请输入联系电话" maxlength="11" onkeyup="this.value=this.value.replace(/[^0-9]/g,‘‘)"  onafterpaste="this.value=this.value.replace(/[^0-9]/g,‘‘)" >

<script>
function checkPhone(phone){
    var regu = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$|(^(13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$)/;
                    if(!(regu.test(phone))){
                        return true;
                    } else{
                        return false;
                    }
                }

    $("#phone").blur(function(){      //手机验证
                     var tel=$(this)[0];
                    if(tel.value.length!=11){
                        console.log("请输入正确的手机号");//增加错误提示
                         $(‘[name="phone"]‘).focus();
                         return ;
                    }
                    if(tel.value.length==11){
                        if(checkPhone(tel.value)){
                            console.log("请填写有效的11位手机号码");//错误提示
                            $(‘[name="phone"]‘).focus();
                             return ;
                        }
                    }
             });
</script>

2  email验证

<input type="email" id="email" name="email" placeholder="请输入电邮地址" onblur="testEmail($(this).val())">                

<script>
function testEmail(str){
   var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9][email protected]([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
   if(!reg.test(str)){
   console.log("请输入正确的电邮地址");//错误提示
    $(‘[name="email"]‘).focus();
      return ;
    }
}

</script>
时间: 2024-10-10 02:59:53

input的表单验证(不断更新中~~)的相关文章

jquery插件-表单验证插件-提示信息中文化与定制提示信息

接上一篇 2)messages 提示:修改默认的提示信息最简单的方法是引入message_zh.js文件即可! 如果需要在validate()方法内提示则可以使用本选项 类型:Object 说明:自定义的提示信息,key:value形式,key是要验证的元素,valule可以是字符串或者函数 使用:message:{ username:"请输入你的用户名" filed2:{ required:'必须填写这个字段', email:'请添加一个正确的邮箱格式' } } //和上面填写rul

HTML5 表单验证

============================================== 1.required --- 必填字段验证 2.minlength, maxlength --- 字符长度验证 3.min, max --- 数值范围验证  用于number,range 和日期时间类型 4.step --- 步长验证 5.pattern --- 正则表达式验证 6.novalidate(form中) ---禁用表单验证 formnovalidate(submit中) ---禁用表单验证

表单验证——JavaScript和Jquery版

1.轻量级的JavaScript表单验证 在应用中引用 validator.min.js 文件 <script type="text/javascript" src="dist/validator.min.js"></script> 实例: <form id="example_form"> <div> <label for="email">邮箱验证</label

jquery validate表单验证插件-推荐

1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的

AngularJS中使用的表单验证

Reference: http://www.tuicool.com/articles/2Qbiqi 客户端表单验证是AngularJS里面最酷的功能之一. AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单. 在AngularJS中,有许多表单验证指令.在这里,我们将谈谈几个最流行指令,然后我们将讨论如何编写自定义的验证. <form name="form"> <label name="email">Y

Django中的Form表单验证

回忆一下Form表单验证的逻辑: 前端有若干个input输入框,将用户输入内容,以字典传递给后端. 后端预先存在一个Form表单验证的基类,封装了一个检测用户输入是否全部通过的方法.该方法会先定义好错误信息的字典,并会遍历类的所有属性(对应前端待验证的输入域),调用各自的验证方法,将错误信息(两类,必要与否以及格式正确与否)存入字典,并得出最终的验证结果.在使用时,需要定义继承自Form基类不同的Form类,以对应有着不同输入域的Form表单.在拿到前端给的字典前,要先初始化自定义From类,直

angularjs中的表单验证

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

jq中的表单验证插件------jquery.validate

今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js 它是与jquery一起结合用来使用的,使用它是非常方便,只需写校验规则和错误字段即可. 我们常见的校验规则有以下几种: (1)required:true               必输字段(2)email:true                  必须输入正确格式的电子邮件(3)date:true               

jQuery表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. 改变默认提示方式. 三.jQuery表单验证插件----通过name属性来关联字段来验证,将校验规则写到 js 代码中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.