submit提交判断
body部分
<form action='https://www.baidu.com' method='post' >
用 户 名:<input type="text" name="username">
<span class='state1'>请输入用户名</span><br/><br/>
密 码:<input type="password" name="password">
<span class='state2'>请输入密码</span><br/><br/>
确认密码:<input type="password" name="repass">
<span class='state3'>请输入确认密码</span><br/><br/>
邮 箱:<input type="text" name="email">
<span class='state4'>请输入邮箱</span><br/><br/>
<input type="submit" class="submit" value="登录">
</form>
style部分
.state1{
color:#aaa;
}
.state2{
color:#000;
}
.state3{
color:red;
}
.state4{
color:green;
}
script部分
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
var ok1=false;
var ok2=false;
var ok3=false;
var ok4=false;
// 验证用户名
$('input[name="username"]').focus(function(){
$(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state2');
}).blur(function(){
if($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=''){
$(this).next().text('输入成功').removeClass('state1').addClass('state4');
ok1=true;
}else{
$(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state3');
}
});
//验证密码
$('input[name="password"]').focus(function(){
$(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state2');
}).blur(function(){
if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=''){
$(this).next().text('输入成功').removeClass('state1').addClass('state4');
ok2=true;
}else{
$(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state3');
}
});
//验证确认密码
$('input[name="repass"]').focus(function(){
$(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state2');
}).blur(function(){
if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!='' && $(this).val() == $('input[name="password"]').val()){
$(this).next().text('输入成功').removeClass('state1').addClass('state4');
ok3=true;
}else{
$(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state3');
}
});
//验证邮箱
$('input[name="email"]').focus(function(){
$(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state2');
}).blur(function(){
if($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){
$(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state3');
}else{
$(this).next().text('输入成功').removeClass('state1').addClass('state4');
ok4=true;
}
});
//提交按钮,所有验证通过方可提交
$('.submit').click(function(){
if(ok1 && ok2 && ok3 && ok4){
$('form').submit();
}else{
alert("请正确注册后登录")
return false;
}
});
});
</script>
submit提交判断的更多相关文章
- 【jquery采坑】Ajax配合form的submit提交(微擎表单提交,ajax验证,submit提交)
1.采坑:实现form的submit提交,在提交之前,进行ajax的不同校验,然后onsubmit=return check(),进行提交 1/1 目的:可以实现以 from的submit提交,然后还 ...
- submit(提交)按钮
为form添加一个submit(提交)按钮,点击这个按钮,表单中的数据将会被发送到通过action属性指定的地址上. 下面是submit按钮的例子: <button type="sub ...
- submit()提交表单时,显示警示框
我同事在实现submit()提交表单时,想要页面弹出警示框. 但是折腾了几小时后发现,submit()始终不执行. 她的代码如下: $(document).ready(function(){ $(&q ...
- jquery validate不用submit提交,用js提交的
jquery validate控件 默认是使用submit提交的, 要想改成使用button的click事件处理函数中手工提交, 可以按照如下方式操作: 1 绑定form的validate, 2 然后 ...
- <input type = "submit"> 提交方式和用js的form.submit()有什么区别?
假设: A表单内有<input type="submit">,通过点击这个input来提交表单 B表单内没有<input type="submit&qu ...
- 如何通过submit提交form表单获取后台传来的返回值
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_34651764/article/details/76373846 小伙伴是不是遇到过这样的问题 ...
- from表单如果未指定action,submit提交时候会执行当前url
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- jquery submit() 提交失败
今天写一个表单提交 居然走到$('#wechat_form').submit() 这,但怎么都没有提交这个表单 google 了一下 Additional Notes:Forms and their ...
- ASP FORM表单提交判断
ASP提交表单是先进行Form填写检测,检测完成没问题之后再执行写入数据库表操作. 相关源码: <script language="javascript"> funct ...
随机推荐
- Struts2 action 跳转到web-inf下,
初学,这个问题困扰了1天.刚开始以为代码或者是配置文件哪里写错了,仔细检查了好几遍确定代码没有错,实在没办法了,准备发帖求助.就在我截图的时候,突然发现我的@Action中有点别扭,即使他没有报错. ...
- CSS学习笔记_day2
目录 一. css初识 二. 在HTML里面引入css的几种方式 1. 外部引入式 2.文档内嵌式 3. 行内式(元素内嵌式) 三. 选择器 四.盒模型 五.文档标准流 六.浮动 一. css初识 1 ...
- 点击按钮下载图片(ie,FF,chrome)
参考网上的一些资料后,总结出来 <!DOCTYPE html><html> <head> <meta content="text/html; cha ...
- HTML5制作网页(2)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> ...
- 第四次Scrum冲刺----Life in CCSU
一.第四次Scrum任务 小组GitHub地址链接 个人GitHub地址链接:https://github.com/2505486985/FirstScrum 继续上次完成的任务,这次完成校园服务中的 ...
- 你想知道吗?come
从大二接触Java开始,到现在也差不多三个年头了.从最基础的HTML.CSS到最后的SSH自己都是一步一个脚印走出来的,其中开心过.失落过.寂寞过.虽然是半道出家但是经过自己的努力也算是完成了“学业” ...
- centos7使用cronolog分割tomcat8.5的catalina.out日志
1.安装cronolog wget https://files.cnblogs.com/files/crazyzero/cronolog-1.6.2.tar.gz tar -zxvf cronolog ...
- m个小朋友手拉手站成一个圈,从第k个小朋友开始报数,报到n的那个小朋友退到圈外,然后他的下一位重新报“1”。这样继续下去,直到只剩下一个小朋友,求解这个小朋友原来站什么地方。
约瑟夫环问题. package pack; import java.util.*; public class demo_2 { static int a[]; public static void m ...
- Linux之prink原理
我的分析是基于Linux4.15.1 1.看看kernel是如何调用到console初始化函数的: 分两条线: a.start_kernel --> console_init --> ...
- 经典问题----拓扑排序(HDU2647)
题目简介:有个工厂的老板给工人发奖金,每人基础都是888,工人们有自己的想法,如:a 工人想要比 b 工人的奖金高,老板想要使花的钱最少 那么就可以 给b 888,给a 889 ,但是如果在此基础上, ...