Javascript ("@"); var dotpos=email.lastIndexOf(“.”); 如果(电子邮件==“”){ validation.style.display='block'; validation.innerHTML=“请输入电子邮件地址”; arrow=document.createElement(“div”); arrow.className='arrow'; 验证。追加子项(箭头); }否则,如果(atpos
如果您同意使用jQuery作为js库,那么这里有一个解决方案供您[针对a)和b)]: 一些评论:Javascript ("@"); var dotpos=email.lastIndexOf(“.”); 如果(电子邮件==“”){ validation.style.display='block'; validation.innerHTML=“请输入电子邮件地址”; arrow=document.createElement(“div”); arrow.className='arrow'; 验证。追加子项(箭头); }否则,如果(atpos,javascript,html,css,webforms,Javascript,Html,Css,Webforms,如果您同意使用jQuery作为js库,那么这里有一个解决方案供您[针对a)和b)]: 一些评论: 永远不要多次使用一个ID 对于javascript,您多次重复相同的代码;在这种情况下,您可以使用事件处理程序生成一种“模板函数”,这样您就不必每次启动函数时都重新键入它。当然,您必须为不使用求值的条件构建特定函数==或=== 我看了一下您的项目,它看起来确实足够大,可以使用jQuery或其他JS库来简化和加快开发过程 我将输入验证设置为.focusout事件,因此用户在单击/切换另一个输入后会立
求值的条件构建特定函数==代码>或===
input.on('focusout',function()
更改为$('#submit')。on('click',function()
$(文档).ready(函数(){
//首先定义用户输入
var输入=[];
输入[0]=$('#作业_id');//作业id输入
输入[1]=$(“#开始日期”);//开始日期输入
输入[2]=$(“#截止日期”);//截止日期输入
//在此处添加其他输入,如so=>inputs[3]=$(“#”);
//定义错误(错误索引必须与其输入的索引相同,例如输入[0]的错误[0])
var错误=[];
错误[0]=“ID不能为空”;//作业ID错误
错误[1]=“请输入日期”;//开始日期错误
错误[2]=“请输入截止日期”;//截止日期错误
//在此处添加其他错误,如so=>errors[3]=$(“#”);
//这些是不同的验证模式
var表达式=[];
表达式[0]='';
表达式[1]=/regex/;
//带有事件处理程序的模板函数
var showFormValidation=函数showFormValidation(输入、错误、表达式){
input.on('focusout',function(){
if(input.val()==表达式){
$(this.next('.validation').show();
$(this.next('.validation').html(错误);
$(this.css({'box-shadow':'0 3px red',
'-moz-boxshadow':“0 0 3px红色”,
“-webkit boxshadow”:“0 0 3px红色”,
“-o-boxshadow”:“0 0 3px红色”,
“边框”:“1px纯红”
});
}else if(input.val()!=表达式){
$(this.next('.validation').hide();
$(this.css({'box-shadow':'none',
“-moz-boxshadow”:“无”,
“-webkit-boxshadow”:“无”,
“-o-boxshadow”:“无”,
“边框”:“1px纯灰”
});
}
});
};
//如果输入为='',此函数将显示所有输入的表单验证
对于(i=0;i
})我发布了一个新的答案,因为这个答案更加具体和复杂。但是请阅读粗体的注释: 我在这里编写的代码几乎可以定义为jQuery错误验证插件。最终,为了开发需要高级errordisplay函数和其他功能的多价应用程序,您应该真正学习javascript框架(如Ext.js、jQuery、jQuery UI[框架的框架]、YUI等)或者至少在高级程度上掌握javascript。 新功能的作用:
函数showFormValidation(输入,errorBlank,minLength,errorminLength,maxLength,errormaxLength,find,errorFind,regex,errorRegex)
- input是用于比较值的输入id
- minLength和maxLength应为2个整数(或null)
- 正则表达式应该是
-封闭的正则表达式模式,find应该是字符串(例如“mail”)/
- 以“error”为前缀的所有参数都是当前面的参数为true时要显示的errormessages(例如,如果输入小于minLength,则会显示errorminLength)
- 如果不想针对某些值进行测试,请将参数设置为null
$(文档).ready(函数(){
//首先定义用户输入
var输入=[];
输入[0]=$('#作业_id');//作业id输入
输入[1]=$(“#开始日期”);//开始日期输入
输入[2]=$(“#截止日期”);//截止日期输入
//在此处添加其他输入,如so=>inputs[3]=$(“#”);
//定义错误(错误索引必须与其输入的索引相同,例如输入[0]的错误[0][0][0])
var错误=[];
错误[0]=[];
错误[1]=[];
错误[2]=[];
var blank=0;
变量长度=1;
var indexof=2;
//输入=空时出错
错误[blank][0]='ID不能为b
<div class="wrapper">
<header class="page_title">
<h1>Create New Job</h1>
</header>
<section class="form">
<form id="form" name="form" method="post" action="#">
<label>Job ID:</label>
<input type="text" name="job_id" id="job_id" placeholder="1">
<div id="validation"></div>
<label>Start Date:</label>
<input type="text" name="start_date" id="start_date" placeholder="mm/dd/yy">
<div id="validation"></div>
<label>Deadline:</label>
<input type="text" name="deadline" id="deadline" placeholder="mm/dd/yy">
<div id="validation"></div>
<label>Finish Date:</label>
<input type="text" name="finish_date" id="finish_date" placeholder="mm/dd/yy">
<div id="validation"></div>
<label>Budget($):</label>
<input type="text" name="budget" id="budget" placeholder="100">
<div id="validation"></div>
<label>Client ID:</label>
<input type="text" name="client_id" id="client_id" placeholder="1">
<div id="validation"></div>
<label>Client Phone Number:</label>
<input type="text" name="phone" id="phone" placeholder="01712333333">
<div id="validation"></div>
<label>Client Email address:</label>
<input type="text" name="email" id="email" placeholder="john.smith@gmail.com">
<div id="validation"></div>
<label>Bidder ID:</label>
<input type="text" name="bidder_id" id="bidder_id" placeholder="1">
<div id="validation"></div>
<label>Number of Supervisor:</label>
<select title="Supervisor" id="num_supervisor">
<option value="-1">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="validation"></div>
<label>Odesk Profile Link:</label>
<input type="text" name="odesk_link" id="odesk_link" placeholder="https://www.odesk.com/jobs/Frontend-engineer">
<div id="validation"></div>
<label>Owner Type:</label>
<input type="radio" name="owner_type" id="owner_type" value="member" /><label class="text_label">Member</label>
<input type="radio" name="owner_type" id="owner_type" value="employee" /><label class="text_label">Employee</label>
<div id="validation"></div>
<div class="clear"></div>
<label>Message:</label>
<textarea id="message" name="message" rows="2" cols="20" placeholder="Your enquiry goes here"></textarea>
<div id="validation"></div>
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
</section>
</div>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border: 0 none;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
a {
text-decoration: none;
}
.clear { clear: both; }
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
display: block;
}
h1 {
font-size: 26px;
}
body {
background: #fff;
font-family: sans-serif;
color: #333;
font-size: 12px;
line-height: 1em;
}
.wrapper {
width: 1000px;
margin: 0 auto;
position: relative;
background: #fff;
}
header.page_title {
background: #E3E3E3;
border-radius: 7px 7px 7px 7px;
color: #333;
padding: 20px;
margin: 40px 0 0 0;
}
.form {
width: 800px;
margin: 20px 0 0 2px;
border: none;
background: #fff;
}
form {
border: none;
background: #fff;
}
.form label {
display: block;
text-align: left;
width: 200px;
float:left;
margin: 5px 0 0 20px;
font-size: 15px;
}
.form label.text_label {
width: auto;
display: inline;
margin: 5px 20px 15px 10px;
}
.form input, .form select {
float:left;
font-size:13px;
margin: 0 0 10px 0;
padding: 0;
}
.form input:required {
}
input:valid {
border: 1px solid #909090;
}
input[type=text]:invalid, input[type=date]:invalid, input[type=number]:invalid, input[type=email]:invalid, input[type=tel]:invalid, input[type=url]:invalid, textarea:invalid {
border: 1px solid #FF0000;
}
.form input[type=text], .form input[type=date], .form input[type=number], .form input[type=email], .form input[type=tel], .form input[type=url] {
width: 500px;
height: 27px;
border: 1px solid #909090;
border-radius: 3px;
}
.form input[type=file] {
width: 500px;
}
.form select {
width: 500px;
height: 27px;
line-height: 27px;
padding: 3px 0 0 0;
border: 1px solid #909090;
border-radius: 3px;
}
.form input[type="radio"] {
margin: 5px 0 0 0;
}
.form textarea {
float: left;
width: 500px;
height: 82px;
margin: 0 0 10px 0;
padding: 0;
font-size: 13px;
border: 1px solid #909090;
}
.form input[type="submit"] {
margin: 10px 0 20px 220px;
width: 100px;
height: 30px;
background: #FF6D1F;
text-align: center;
line-height: 30px;
color: #FFFFFF;
font-size: 13px;
font-weight: bold;
border: none;
box-shadow: 0 1px 3px rgba(38, 151, 72, 0.5), 0 1px 0 #9FE662 inset;
border-radius: 5px;
cursor: pointer;
}
.form input[type="submit"]:hover {
background: #FF822E;
}
input[type=text]:focus, textarea:focus, input[type=search]:focus, input[type=date]:focus, input[type=number]:focus, input[type=email]:focus, select:focus, input[type=tel]:focus, input[type=url]:focus {
background: #fff;
border-color: #595959;
-webkit-box-shadow: 0px 0px 6px 0px rgba(103, 102, 106, .7);
box-shadow: 0px 0px 6px 0px rgba(103, 102, 106, .7);
outline: none;
}
#validation {
background: #EAEAEA;
width: 165px;
height: 18px;
/*opacity: .5;*/
border: 1px solid #A69E7C;
float: left;
margin: -20px 0 0 -110px;
padding: 7px 5px 10px 10px;
border-radius: 0 0 7px 7px;
box-shadow: 0 0 2px #888;
color: #000;
line-height: 14px;
position: relative;
display: none;
}
input[type=radio] #validation {
margin-left: -10px;
}
.arrow {
width: 14px;
height: 15px;
position: absolute;
background: url(../images/arrow-down.png) no-repeat;
bottom: -15px;
left: 77px;
z-index: 120;
}
var submit = document.getElementById("submit");
submit.onclick = function() {
var job_id = document.getElementById("job_id").value;
var validation = document.getElementById("validation");
var form = document.getElementById("form");
if(job_id == "") {
validation.style.display = 'block';
validation.innerHTML = "ID cannot be left empty";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var start_date = document.getElementById("start_date").value;
if(start_date == "") {
validation.innerHTML = "Please, Enter the date";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var deadline = document.getElementById("deadline").value;
if(deadline == "") {
validation.innerHTML = "Please, Enter the deadline";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var finish_date = document.getElementById("finish_date").value;
if(finish_date == "") {
validation.innerHTML = "Please, Enter the finish date";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var budget = document.getElementById("budget").value;
if(isNaN(budget)) {
validation.innerHTML = "Enter Numeric Value here.";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else if(budget == "") {
validation.innerHTML = "Please, Enter the Budget";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var client_id = document.getElementById("client_id").value;
if(client_id == "") {
validation.style.display = 'block';
validation.innerHTML = "ID cannot be left empty";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var phone = document.getElementById("phone").value;
if(isNaN(phone)) {
validation.innerHTML = "Enter Numeric Value here.";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else if(phone == "") {
validation.innerHTML = "Please, Enter the Phone number";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else if(phone.length < 7) {
validation.innerHTML = "Phone Number should be at least 7 chars";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else if(phone.length > 11) {
validation.innerHTML = "Phone Number should be at best 11 chars";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var email = document.getElementById("email").value;
var atpos=email.indexOf("@");
var dotpos=email.lastIndexOf(".");
if(email == "") {
validation.style.display = 'block';
validation.innerHTML = "Please, enter email address";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else if(atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
validation.innerHTML = "This is not a valid email address";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}
else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var bidder_id = document.getElementById("bidder_id").value;
if(bidder_id == "") {
validation.style.display = 'block';
validation.innerHTML = "ID cannot be left empty";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var num_supervisor = document.getElementById("num_supervisor").value;
if(num_supervisor == "-1") {
validation.style.display = 'block';
validation.innerHTML = "Please, select";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var odesk_link = document.getElementById("odesk_id").value;
var tomatch= /^(ht|f)tps?:\/\/[a-z0-9-\.]+\.[a-z]{2,4}\/?([^\s<>\#%"\,\{\}\\|\\\^\[\]`]+)?$/;
if(odesk_link == "") {
validation.style.display = 'block';
validation.innerHTML = "Please, Enter the url";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
} else if (tomatch.test(odesk_link)) {
validation.innerHTML = "";
validation.style.display = 'none';
return true;
}else {
validation.style.display = 'block';
validation.innerHTML = "This is not valid url";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
return false;
}
var owner_type = document.getElementById("owner_type").value;
if(owner_type == "") {
validation.style.display = 'block';
validation.style.marginLeft = '0';
validation.innerHTML = "Please, write something";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
var message = document.getElementById("message").value;
if(message == "") {
validation.style.display = 'block';
validation.innerHTML = "Please, write something";
arrow = document.createElement("div");
arrow.className = 'arrow';
validation.appendChild(arrow);
}else {
validation.innerHTML = "";
validation.style.display = 'none';
}
}