澳门威利斯人_威利斯人娱乐「手机版」

来自 澳门威利斯人 2019-08-31 17:47 的文章
当前位置: 澳门威利斯人 > 澳门威利斯人 > 正文

javascript制作的简单注册模块表单验证,js实现注

咱俩原先是三个非常长的form表单,里面有众多选项。顾客反馈那样非常不够本人,轻巧看花眼。因而开展改进,达成多步骤进程,多少个提交的落到实处(其实只有一个form提交)。

下边就以情状type=“text”为例:

一个注册框  进行表单验证管理

兑现的思路:将表单的选项装入两个div中,叁个出示,别的遮掩

复制代码 代码如下:

如图

落实际效果果与利益如下:

<form id="form1" method="post">
<input type="text" />
<input type="text" />
<input type="button" value="clear" onclick="Refresh()" />
</form>

威澳门尼斯人1294cc 1

威澳门尼斯人1294cc 2

经过调用js的Refresh方法
方法一

有差不离的认证提醒成效

1、JavaScript代码

复制代码 代码如下:

代码思路也比较简单

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-powerFloat.js"></script>
<link rel="stylesheet" href="css/powerFloat.css" type="text/css" />

<script type="text/javascript">
 $(function() {
 $(".pwdTrigger").powerFloat({
 eventType : "focus",
 targetMode : "remind",
 targetAttr : "placeholder",
 position : "2-1"
 });

 });
</script>

<script type="text/javascript">

 function one() {
 if (confirm("确定提交?")) {
 $("#one").hide();
 $("#two").show();
 $("#grxx").attr("class","current_prev");
 $("#zjxx").attr("class","current");
 }
 }

 function two() {
 if (confirm("确定提交?")) {
 $("#two").hide();
 $("#three").show();

 $("#grxx").attr("class","done");
 $("#zjxx").attr("class","current_prev");
 $("#qzxx").attr("class","current");
 }
 }

 function three() {
 if (confirm("确定提交?")) {
 $("#three").hide();
 $("#four").show();

 $("#grxx").attr("class","done");
 $("#zjxx").attr("class","done");
 $("#qzxx").attr("class","current_prev");
 $("#qzfs").attr("class","current");
 }
 }

 function reone() {
 if (confirm("确定返回?")) {
 $("#one").show();
 $("#two").hide();
 $("#grxx").attr("class","current");
 $("#zjxx").attr("class","");
 }
 }
 function retwo() {
 if (confirm("确定返回?")) {
 $("#three").hide();
 $("#two").show();
 $("#grxx").attr("class","current_prev");
 $("#zjxx").attr("class","current");
 $("#qzxx").attr("class","");
 }
 }
 function rethree() {
 if (confirm("确定返回?")) {
 $("#four").hide();
 $("#three").show();
 $("#grxx").attr("class","done");
 $("#zjxx").attr("class","current_prev");
 $("#qzxx").attr("class","current");
 $("#qzfs").attr("class","last");;
 }
 }
</script>

function Refresh()
{
var v=document.forms[0].elements;
威澳门尼斯人1294cc,for(var i=0;i<v.length;i )
{
if(v[i].type=="text")
{
v[i].value="";
}
}

输入框失去核心时便检查测量检验,并展开始拍戏卖

2、CSS代码

}

表单具备 onsubmit = "return check()"行为,管理验证景况

<style type="text/css">
.flow_steps ul li { float:left; height:23px; padding:0 40px 0 30px; line-height:23px; text-align:center; background:url(img/barbg.png) no-repeat 100% 0 #E4E4E4; font-weight:bold;}
.flow_steps ul li.done { background-position:100% -46px; background-color:#FFEDA2;}
.flow_steps ul li.current_prev { background-position:100% -23px; background-color:#FFEDA2;}
.flow_steps ul li.current { color:#fff; background-color:#990D1B;}
.flow_steps ul li.last { background-image:none;}
</style>

或方式二

点击提交表单开关时,进行末段的认证,达到是还是不是通过表单提交的伸手。

本文由澳门威利斯人发布于澳门威利斯人,转载请注明出处:javascript制作的简单注册模块表单验证,js实现注

关键词: 澳门威利斯人