验证整个表单

亦凉 2022-07-10 04:19 180阅读 0赞

以下的代码是从书上打入进来的，里面设计一些最为常用表单的代码，可以学到更加详细具体的知识。虽然代码不难，但是对于规范格式等很有用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>验证整个表单</title>  
<style>  
.submit\{  
margin-left:125px;margin-top:10px;\}  
.label\{float:left;width:120px;\}  
.infobox\{width:120px;\}  
.error\{color:red;padding-left:10px;\}  
div\{padding:5px;\}  
.chkb\{margin-left:125px;padding-left:10px;\}  
.radiobtn\{margin-left:125px;margin-top:10px;\}  
.inputs\{  
background-color:cyan\}  
fieldset\{  
border:1px solid \#888;\}  
legend\{  
border:1px solid \#888;  
background-color:cyan;  
color:blue;  
font-weight:bold;  
padding:5em;  
\}

</style>

<script type="text/javascript" src="G:\\jquery-2.1.3.js"></script>

<script type="text/javascript">  
$(document.ready(function()\{  
$('.error').hide();  
  
  
$('.userid').focus(function()\{  
$(this).addClass('inputs');  
\});  
  
  
$('.emailadd').focus(function()\{  
$(this).addClass('inputs');  
\});  
  
  
$('.password').focus(function()\{  
$(this).addClass('inputs');  
\});  
  
  
  
  
$('fooderror').addClass('error');  
$('.fooderror').hide();  
$('.payerror').addClass('error');  
$('.payerror').hide();  
  
  
$('.submit').click(function(event)\{  
var data=$('.userid').val();  
if(validate\_userid(data))\{  
$('.userid').next().hide();  
\}  
else\{  
$('.userid').next().show();  
\}  
  
  
data=$('.password').val();  
var len=data.length;  
if(len<1)\{  
$('.password').next().show();  
\}  
else\{  
$('.password').next().hide();  
\}  
  
  
data=$('.emailadd').val();  
if(valid\_email(data))\{  
$('.emailadd').next().hide();  
\}  
else $('.emailadd').next().show();  
  
  
var count=0;  
$('div').find(':checkbox').each(function()\{  
if($(this).is(':checked'))\{  
cout++;  
\}  
\});  
if(count==0)\{  
$('.fooderror').css(\{'margin-left':250\}).show();  
\}  
else $('.fooderror').hide();  
  
  
count=0  
$('div').find("radio").each(function()\{  
if($(this).is(':chexkbox'))\{  
count++;  
\}  
\});  
if(count==0)\{  
$('.payerror').css(\{'margin-left':250\}).show();  
\}  
else  
$('.payerror').hide();  
  
  
count=$('select option:selected').val();  
if(count==0)\{  
$('.infobox').next().show();  
\}  
else $('.infobox').next().hide()  
event.preventDault();  
\});  
  
  
\});  
function valid\_email(email)\{  
var pattern=new RegExp(/^\[\\w-\]+(\\.\[w-\]+\\.)+\[a-zA-Z\]+$/);  
return pattern.test(email);  
\}  
function validate\_userid(uid)\{  
var pattern=new RegExp(/^\[a-z0-9\]+$/);  
return pettern.test(uid);  
\}  
</script>  
</head>  
  
  
<body>  
<form>  
<fieldset>  
<legend>Enter your information</legend>  
<div><span class="label">User ID</span>  
<input type="text" class="userid" name="userid"/><span class="error">User id can contain only numeral,character or\_(underscore)</span></div>  
  
  
<div><span class="label">Password</span><input type="password" class="password" name="password" /><span class="error">password cannot be blank </span></div>  
  
  
<div><span class="label">Email Address</span><input type="text" name="emailid" class="emailadd" /><span class="error">Invalid email address</span></div>  
</fieldset>  
<fieldset>  
<div ><span class="label">select food items</span><br /><input type="checkbox" name="pizza" id="pizza" value=5 class="chkb" />Pizza $5<br />  
<input type="checkbox" id="hotdog" name="hotdog" value=2 class="chkb" />HotDog $2<br />  
<input type="checkbox" id="coke" name="coke" value=1 class="chkb" />Coke $1<br />  
<input type="checkbox" id="fries" name="fries" value=3 class="chkb" />French Fries $3<br />  
<span class="fooderror" >you have no selected any food item</span></div>  
  
  
<div><span class="label">mode of payment</span><br /><input type="radio" name="paymode" class="radiotn" value="MasterCard" />MasterCard<br />  
<input type="radio" name="paymode" class="radiobtn" value="ANZ GRINDLAY CARD" />ANZ GRINDLAY CARD<br />  
<input type="radio" name="paymode" class="radiobtn" value="Visa card" />Visa card<br />  
<span class="payerror" >you have not selected any payment method </span></div>  
</fieldset>  
<fieldset>  
<div><span class="label">Country </span><select id="country" class="infobox">  
<option value="0" >select a country </option>  
<option value="USA" >USA </option>  
<option value="United" >United</option>  
<option value="India" >India </option>  
<option value="China" >China </option>  
</select>  
</fieldset>  
<span class="error">Please select the country </span></div>  
<input class="submit" type="submit" value="Submit" /></form>  
</body>  
</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，180人围观）

还没有评论，来说两句吧...

相关阅读

相关 AJAX_传递整个form表单数据

当一个form表单数据非常多时，不需要将每一个数据在js中获取后再通过AJAX传递，只需要设置好表单中每个元素的name属性，然后将获取该表单元素，将其serialize

怼烎@/ 2023年06月20日 15:59/ 0 赞/ 27 阅读

相关 antd vue表单验证_antd-for-vue 表单验证失效自定义表单验证使表单非空验证失效（其他验证失效）...

\\ antd-for-vue 表单验证失效自定义表单验证使表单非空验证失效(其他验证失效) \\\\\ antd 的表单校验方法包括 validateFields 和

谁借莪１个温暖的怀抱￠/ 2022年10月24日 05:53/ 0 赞/ 343 阅读

相关表单验证

应用一、引入 <script src="Scripts/jquery-1.7.1.min.js"></script> <script src="Scripts/jqu

朱雀/ 2022年07月24日 06:28/ 0 赞/ 578 阅读

相关验证整个表单

以下的代码是从书上打入进来的，里面设计一些最为常用表单的代码，可以学到更加详细具体的知识。虽然代码不难，但是对于规范格式等很有用。 <!DOCTYPE html PUBLIC

亦凉/ 2022年07月10日 04:19/ 0 赞/ 181 阅读

相关表单验证

java script验证表单时常用： "^-\[0-9\]\\[1-9\]\[0-9\]\＄"　　//负整数 "^-?//d+＄"　　　　//整

ゝ一纸荒年。/ 2022年06月13日 07:54/ 0 赞/ 418 阅读

相关表单验证

@Min(value = 18, message = " 不得小于18 ") private Integer age; / 表单验证 /

╰+攻爆jí腚メ/ 2022年06月05日 10:15/ 0 赞/ 406 阅读

相关表单验证

angularjs 表单验证，包含必填、手机、邮箱、ip、网址等基于angularjs自己封装的验证插件，之前的插件在angularjs上就不能使用了，然后将之前的封

淩亂°似流年/ 2022年06月04日 10:14/ 0 赞/ 389 阅读

相关表单验证

表单验证为了减轻服务器的压力，请求次数减少，保证用户输入符合要求。 > 常用的表单验证 > \- 日期样式 > \- 表单内容是否为空 > \- 用户名和密码

梦里梦外;/ 2022年05月24日 04:40/ 0 赞/ 419 阅读

相关表单验证

代码虽然有重复，但是重要的是思想和正则表达式的用 ---------- <!DOCTYPE html>

痛定思痛。/ 2022年05月19日 06:35/ 0 赞/ 452 阅读

相关表单验证

java script验证表单时常用： "^-\[0-9\]\\[1-9\]\[0-9\]\＄"　　//负整数 "^-?//d+＄"　　　　//整

小灰灰/ 2022年01月07日 14:35/ 0 赞/ 586 阅读