长沙web培训
达内长沙侯家塘中心

15017569023

热门课程

【长沙Web前端培训机构】表单验证

  • 时间:2016-10-26 11:59
  • 发布:长沙web培训
  • 来源:web教程

长沙Web前端培训机构的老师这一期给大家讲表单验证(验证手机号是否存在,验证码倒计时)

话不多说,直接上代码

css代码:

html代码:

<form method="post" id="form_hroizon" enctype="multipart/form-data" action="/">

<input type="hidden" ame="phoneTemplet" id="phoneTemplet">

<input type="hidden" ame="regType" id="regType">

<div class="c-login-input">

<div class="form-group">

<label for="inputEmail3" class="label-control label-width120 pull-left t-r-f f16">手机号</label>

<div class="pull-left">

<input type="tel" autocomplete="off" class="input-control put-width440 j-telphone" id="inputtel" name="phones" placeholder="请输入您的电话号码" value="">

<span class="f12 red tel-msg"></span>

<div class="c-login-errtips" style="display:none;"></div>

</div>

</div>

<div class="form-group">

<label for="inputEmail3" class="label-control label-width120 pull-left t-r-f f16">登录密码</label>

<div class="pull-left">

<input type="password" class="input-control put-width440 fistpwd" id="inputpwd" name="password" placeholder="请输入密码" value="">

<span class="f12 red pwd-msg"></span>

</div>

</div>

<div class="form-group">

<label for="inputEmail3" class="label-control label-width120 pull-left t-r-f f16">验证码</label>

<div class="pull-left">

<input type="tel" class="input-control put-with100 vericode" id="inputEmail3" ame="code" placeholder="请输入验证码">

<input id="btnSendCode" type="button" value="免费获取验证码" class="j-getcode f12 b-i-k btn code-btn c-p" />

<span class="f12 red code-msg"></span>

</div>

</div>

</div>

<div class="form-group">

<a class="j-sends" type="submit" name="submit" target="_self" href="javascript:void(0)">注册</a>

</div>

</form>

JS代码:

<script type="text/javascript">

$(function(){

$(".j-sends").click(function(){

var phones = $.trim($(".j-telphone").val());

var isMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;

if(!phones){

$('.tel-msg').text('请输入手机号码,不能为空');

return false;

}else if (!isMobile.test(phones)) {

$('.tel-msg').text('请输入有效的手机号码');

return false;

}else{

//手机号码是否存在

$.ajax({

url : "/", //

type:"post",

dataType:"JSON",

data:{

phones: phones,

},

contentType:'application/json;charset=UTF-8',

//async: false,

success:function(data){

if (data.flag == "1") { //

$('.tel-msg').html(data.errorInfo); //

return false;

}else{

$('.tel-msg').html(data.errorInfo); //可

}

},

error:function(){

}

});       

}

})

//验证码倒计时

var InterValObj; //timer变量,控制时间 

var count = 30; //间隔函数,1秒执行 

var curCount;//当前剩余秒数 

var code = ""; //验证码 

var regType;

var phoneTemplet;

var codeLength = 4;//验证码长度 

$(".code-btn").click(function(){

curCount = count; 

var phone=$.trim($(".j-telphone").val());//手机号码 

var isMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;

var jtel = $(".j-telphone");

if(phone != "" && isMobile.test(phone) && phone.length==11){ 

//设置button效果,开始计时 

$("#btnSendCode").attr("disabled", "true"); 

$("#btnSendCode").val("请在" + curCount + "秒内输入验证码"); 

InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次

//产生验证码 

for (var i = 0; i < codeLength; i++) { 

code += parseInt(Math.random() * 9).toString(); 

}

//向后台获验证码

$.ajax({ 

url : base + "/",

type: "POST",

// dataType: "text", 

// data: "phones=" + phone + "&code=" + code,  

dataType: "JSON",

data:{

phones:phone,

code: code,

regType:"1",

phoneTemplet:"phone_uc"

},

success: function (data){

if(data.flag=="F"){

$(".code-msg").html(data.errorInfo);                  

}else{

$(".code-msg").html(data.errorInfo);

}

}); 

}else{ 

$('.tel-msg').text('请输入有效的手机号码');                

}

});

//timer处理函数 

function SetRemainTime() { 

if (curCount == 0) {                 

window.clearInterval(InterValObj);//停止计时器 

$("#btnSendCode").removeAttr("disabled");//启用按钮 

$("#btnSendCode").val("重新发送验证码"); 

code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效     

else { 

curCount--; 

$("#btnSendCode").val("请在" + curCount + "秒内输入验证码"); 

}   

})

</script>

额外小功能添加--

一、密码隐藏显示 老套的JS写法通过name值来判读也比较常用

//隐藏显示(emilform是表单的name值,password是密码的name值)

function showmailpass(){  

if (this.emilform.password.type=="password") {

this.emilform.password.type="text";

document.getElementById("emilhide").style.display="block";

document.getElementById("emilshow").style.display="none";

}

}

function hidemailpass(){

if (this.emilform.password.type=="text") {

this.emilform.password.type="password";

document.getElementById("emilshow").style.display="block";

document.getElementById("emilhide").style.display="none";

}

}

2、jquery方法

<form method="post" name="emilform" id="form_emil" enctype="multipart/form-data" action="/">

<!--密码-->

<div class="regist-item regist-icon i-passwd clearfix">

<input type="password" tabindex="2" name="password" id="emilpwd" class="pull-left fpwd" placeholder="请输入密码" value="" />

<a href="javascript:showmailpass()" id="emilshow" class="a-shpass b-in-lok pull-left trans">显示</a>

<a href="javascript:hidemailpass()" id="emilhide" style="display:none" class="a-shpass b-in-lok pull-left trans">隐藏</a>

</div>

</form>

二、回车提交表单

A、keydown() 事件会在键盘按下时触发.

keyup()事件会在按键释放时触发,也就是你按下键盘弹起后的事件

keypress()事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键

1、针对整个form表单

<a href="javascript:void(0)" tabindex="5" id="loginent">注&nbsp;&nbsp;册</a>

$(document).on('keydown ',function(e){

var e = document.all ? window.event : e;

if(e.keyCode == "13"){

//里面填写触发事件

例如:document.getElementById('loginent').click();  //表单提交按钮触发事件

}

});

2、页面中多个表单,具体的回车一个表单可以- 一样

$("#form_phone").keydown(function(e){

//          var e = e || event,

//     keycode = e.which || e.keyCode;

var e = e || event;

var keycode = e.which || e.keyCode;

if (keycode==13) {

document.getElementById('j-sends').click();

}

});

/////回车代替tab ------(看看就好,可以用的)

<form name="forms">

<div class="login-form-item clearfix">

<input type="text" ame="user" class="pull-left trans" tabindex="1" id="user" placeholder="请输入用户名"/>

<a href="javascript:void(0)" class="jremove-user pull-left trans">清除</a>

</div>

<div class="login-form-item clearfix">

<input type="password" name="password" tabindex="2" id="password" class="login-pwd pull-left" placeholder="请输入密码"/>

<a id="clickshow"  class="jshow-pwd k pull-left trans">显示</a>

</div>

<div class="login-form-item clearfix">

<input type="text" name="code" tabindex="3" id="code" class="login-nonce pull-left keyenter" placeholder="请输入验证码"/>

<span class="b-in-lok captcha-spn pull-left"><img class="identiy-pic" id="captcha-pic" src="../images/yzhma.png" alt='' align="absmiddle"></span>

</div>

<a href="javascript:;" id="loginent">登&nbsp;&nbsp;录</a>

</form>

var txt = new Array('user', 'password', 'code');  //ID

if (document.addEventListener) {

document.addEventListener("keypress", fireHandler, true);

}

function fireHandler(evt) {

if (evt.which == 13) {

if (evt.target.id == 'user') {

document.getElementById('password').focus();

}

if (evt.target.id == 'password') {

document.getElementById('code').focus();

}

if (evt.target.id == 'code') {

document.getElementById('loginent').click(); //提交表单按钮

}

}

}

了解详情请登陆长沙达内Web前端培训官网(cs.web.tedu.cn)!

上一篇:Web前端老师教你图标变色的方法
下一篇:canvas画布在主流浏览器中的尺寸限制

马上预约三天免费体验课

姓名:

电话:

javascrip的数据类型和变量

ajax前后端数据交互

javascipt的函数表达式

菜单展开关闭

选择城市和中心
贵州省

广西省

海南省