表单验证(验证手机号是否存在，验证码倒计时)
话不投机，话就多，直接上代码
css代码：
html代码：
<form method="post" id="form_hroizon" enctype="multipart/form-data" action="/">
<input type="hidden" name="phoneTemplet" id="phoneTemplet">
<input type="hidden" name="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" name="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,
//dataType : 'jsonp',
//jsonp: "appcode",//服务端用于接收appcode调用的function名的参数
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">注 册</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" name="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">登 录</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(); // 提交表单 按钮
}
}
}
喜欢就给赞个把，哈哈，对你有帮助把
