js判断输入框及提交
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js判断输入框及提交相关的知识，希望对你有一定的参考价值。
以下为代码，我现在用这个方案可以实现每个input框的判断功能，
能不能整合在一个function中，整为一个事件呢？另外在点最后的提交时如果判断上述有一项为不正确的，不会提交
<li class="l">用户名</li><li class="r"><input id="username" type="text" name="username" value="请输入要注册的用户名" onfocus="if (value =='请输入要注册的用户名')value =''" onblur="return checkuser()" /></li><li class="r" id="useralert"></li>
<li class="clearit"></li>
<!--li class="l">邮箱</li><li class="r"><input id="email" type="text" style="width:160px;" name="email" value="请输入您的邮箱" onfocus="if (value =='请输入您的邮箱')value =''"onblur="if (value =='')value='请输入您的邮箱' else return checkuser()" /></li><li class="r" id="uemailalert"></li!-->
<li class="l">邮箱</li><li class="r"><input id="email" type="text" style="width:160px;" name="email" value="请输入您的邮箱" onfocus="if (value =='请输入您的邮箱')value =''" onblur="return checkemail()" /></li><li class="r" id="emailalert"></li>
<li class="clearit"></li>
<li class="l">登录密码</li><li class="r"><input id="password" type="password" name="password" onblur="return checkpwdinput()" onfocus="return resetpwd()" /></li><li class="r" id="pwdalert"></li>
<li class="clearit"></li>
<li class="l">确认密码</li><li class="r"><input id="repassword" type="password" name="repassword" onfocus="return resetrepwd()" onblur="return checkpwd()" /></li><li class="r" id="repwdalert"></li> <input type="button" class="regbtn" value="" onclick="adduser()" />
function checkuser() var cusername = $("#username").val(); if(cusername==null||cusername=="") $("#useralert").html('<font color="red">请输入用户名</font>'); else if (cusername.length<4) $("#useralert").html('<font color="red">用户名不能小于4位</font>'); else $.post("/api/reguser/?action=checkuser&username="+cusername, function (data,textStatus) if(data!=null) $("#useralert").html(data); , "text");
代码太多了，说我超长。只能用图片了，如果能知道的可以联系我下，在线沟通，谢谢
<head>
<script type="text/javascript">
function validate()
var at=document.getElementById("email").value.indexOf("@")
var age=document.getElementById("age").value
var fname=document.getElementById("fname").value
submitOK="true"
if (fname.length>10)
alert("名字必须小于 10 个字符。")
submitOK="false"
if (isNaN(age)||age<1||age>100)
alert("年龄必须是 1 与 100 之间的数字。")
submitOK="false"
if (at==-1)
alert("不是有效的电子邮件地址。")
submitOK="false"
if (submitOK=="false")
return false
</script>
</head>
<body>
<form action="/example/hdom/hdom_submitpage.html" onsubmit="return validate()">
名字（最多 10 个字符）：<input type="text" id="fname" size="20"><br />
年龄（从 1 到 100）：<input type="text" id="age" size="20"><br />
电子邮件：<input type="text" id="email" size="20"><br />
<br />
<input type="submit" value="提交">
</form>
</body>
</html> 参考技术A 你说的
“能不能整合在一个function中，整为一个事件呢？另外在点最后的提交时如果判断上述有一项为不正确的，不会提交”
早就有人做了， 你搜下jquery的validate插件。几分钟就弄完了 参考技术B function validateAccount()
if(***)
********
return false;
return true;
function validateEmail()
if(***)
********
return false;
return true;
如此等等....
function validtateInput()
return validateAccount()&& validateEmail()&&.....
在提交的按钮上加onclick
<input type='submit' value='提交' onclick='return validtateInput();' />本回答被提问者采纳 参考技术C function checkForm(id,text)
var obj = document.getElementById(id);
if(obj.value == text)
obj.value='';
else
return false;
传入ID和文字，判断一下。希望可以帮到你 参考技术D function submit()
if ($("#user_name").val()=="")
$("#user_name_error").val("用户名不能为空")
else if (```)
····
else if (```)
····
else
····
｝
｝
判断值符合条件 输出提示语言 都不符合 执行提交
应聘者页面——文本输入框及单选多视图重构
近期校招季。实习单位提供校招软件服务，线上用户比較多，并没有太多新功能上线，乐帝主要负责做一些重构的工作。想想今年毕业新来的同事，已经可以独立承担业务开发。乐帝近期对MVC架构有了更深的了解，编程能力也有一定的入门提高。从同事新胜那儿。学到非常多前端开发的规范，在这里再次感谢新胜耐心教导、无私帮助。
乐帝与新胜最大的区别在于。新胜处理问题解决这个问题，都有深厚的理论功底，即知其所以然，而不单单是一个程序猿，他有自己的思考，懂得怎样优化代码与性能。乐帝向新胜学习他，构建的理论体系及解决这个问题的方法。高速缩小与新胜这个模范的差距。
这篇文章所讨论视图，在单位。招聘项目里，应聘者功能下。那为什么须要重构呢？
在这次重构工作中。我想有双方面原因：
- 模板中处理逻辑过于复杂，不符合结构与处理逻辑分离，代码可读性不高。
<select data-name="<%=Name%>" data-obj="<%=controlData.Object%>" class="souce_name search_view width130">
<option value="">不限</option>
<%if(typeof searchItems !="undefined"){%>
<%if(searchItems.Value!=null){%>
<%_.each(dataSource, function(item){%>
<%if(searchItems.Value.length>0){%>
<%_.each(searchItems.Value, function(item1){%>
<%if(item1!=item.Value){%>
<option value="<%=item.Value%>"><%=item.Text%></option>
<%}else{%>
<option value="<%=item.Value%>" selected="selected"><%=item.Text%></option>
<%}%>
<%})%>
<%}else{%>
<option value="<%=item.Value%>"><%=item.Text%></option>
<%}%>
<%})%>
<%}else{%>
<%_.each(dataSource, function(item){%>
<option value="<%=item.Value%>" title="<%=item.Text%>"><%=item.Text%></option>
<%})%>
<%}%>
<%}else{%>
<%_.each(dataSource, function(item){%>
<option value="<%=item.Value%>"><%=item.Text%></option>
<%})%>
<%}%>
</select>如上所看到的，模板中用了多层if-else嵌套，夹杂各种<% %>以切割HTML和JS代码，结构与逻辑耦合度很高。可读性比較低。不利于改动。
- 多个同类视图，在逻辑和结构上，仅仅有微小差异。但源码各写一套逻辑和视图，扩展性不高，造成大量代码冗余，不利于后期维护。
textInputAttr:function(){
var isDefault = this.model.get("IsDefault");
var searchItems = this.model.get("searchItems");
var defaultVal = this.model.get("DefaultVal");
var cType =this.model.get("Ctype");
if(cType==1){
this.$el.find("input[type='text']").addClass("search_box_prev");
this.$el.find("input[type='text']").attr("data-rule-maxlength",300);
}else{
this.$el.find("input[type='text']").addClass("souce_name");
this.$el.find("input[type='text']").attr("data-rule-maxlength",100);
if(cType==23){
this.$el.find("input[type='text']").addClass("default_word");
}
}//针对不同ctype设置input不同属性及值
if(cType==1){
if(typeof isDefault !="undefined"&&isDefault==1)
{
this.$el.find("input[type='text']").attr("defaultValue",defaultVal);
};// 设置defaultValue属性
}
if(typeof searchItems !="undefined")
{
if(searchItems.Value!=null)
{
this.$el.find("input[type='text']").attr("value",searchItems.Value[0]);
}
}
else{
if(cType==1){
if(typeof isDefault !="undefined"&&isDefault==1){
this.$el.find("input[type='text']").attr("value",defaultVal);
}
}
}//设置value属性值
},
checkInputAttr:function(){
var searchItems = this.model.get("searchItems");
var cType =this.model.get("Ctype");
if(cType==1){
this.$el.find("input[type='checkbox']").addClass("search_box_any");
}else{
this.$el.find("input[type='checkbox']").addClass("souce_name");
}
if((typeof searchItems !="undefined")&&(searchItems.Value!=null)&&(searchItems.Value.length>0)){
_.each(searchItems.Value,function(item,value){
var valLength = (cType==1)?(searchItems.Value.length):(searchItems.Value.length-1);//推断採用何种表达式
if(valLength==value){
if(item){
this.$el.find("input[type='checkbox']").attr("value",item);
if(searchItems.Value[value]=="true")
this.$el.find("input[type='checkbox']").attr("checked","checked");
}else{
this.$el.find("input[type='checkbox']").attr("value","");
}
}
});
}else{
this.$el.find("input[type='checkbox']").attr("value","");
}
}//checkbox设置
这段代码存在的隐患是，依据Ctype做推断生成各视图，与model很相关，即与已有数据结构高度耦合。不利于扩展。假如在此逻辑上。我须要新加一个与上述三类视图同类的视图，那么还需在代码基础上。再次改进代码，增加对新视图Ctype推断，这显然不是我们想要的。
var SingleInputView = Talent.ItemView.extend({
onBeforeRender:function(){
this.standLabel();//标准化标签
},
onRender:function(){
this.textMaxlen(this.maxlength);
this.setCheckboxVal(this.minus);
this.SetTextInput();
this.SetCheckboxInput();
},
standLabel:function(){
var label = this.model.get("Label");
if((label.length != 7)&&(label.length>6))
{
this.model.set({"Label":label.substring(0,6)+"…"});
}
},
textAddClass:function(){
},
textMaxlen:function(length){
this.$el.find("input[type='text']").attr("data-rule-maxlength",length);
},
setTextDefaultVal:function(){
},
setTextVal:function(){
var isDefault = this.model.get("IsDefault");
var searchItems = this.model.get("searchItems");
var defaultVal = this.model.get("DefaultVal");
if(typeof searchItems !="undefined")
{
if(searchItems.Value!=null)
{
this.$el.find("input[type='text']").val(searchItems.Value[0]);
}
}
},
checkboxAddClass:function(){
},
setCheckboxVal:function(minus){
var searchItems = this.model.get("searchItems");
if((typeof searchItems !="undefined")&&(searchItems.Value!=null)&&(searchItems.Value.length>0)){
_.each(searchItems.Value,function(item,value){
var valLength =searchItems.Value.length-minus;//推断採用何种表达式
if(valLength==value){
if(item){
this.$el.find("input[type='checkbox']").val(item);
if(searchItems.Value[value]=="true")
this.$el.find("input[type='checkbox']").attr("checked","checked");
}else{
this.$el.find("input[type='checkbox']").val("");
}
}
});
}else{
this.$el.find("input[type='checkbox']").val("");
}
},
});有些逻辑代码，仅仅是随着视图不同，变量不同。这里在父类中，构造带变量的方法。并在子类中设置属性值。传入父类方法中，如：
setCheckboxVal:function(minus){
var searchItems = this.model.get("searchItems");
if((typeof searchItems !="undefined")&&(searchItems.Value!=null)&&(searchItems.Value.length>0)){
_.each(searchItems.Value,function(item,value){
var valLength =searchItems.Value.length-minus;//推断採用何种表达式
if(valLength==value){
if(item){
this.$el.find("input[type='checkbox']").val(item);
if(searchItems.Value[value]=="true")
this.$el.find("input[type='checkbox']").attr("checked","checked");
}else{
this.$el.find("input[type='checkbox']").val("");
}
}
});在父类中构造了渲染后onRender回调函数，自己主动调用通用类及子视图方法：
onRender:function(){
this.textMaxlen(this.maxlength);
this.setCheckboxVal(this.minus);
this.SetTextInput();
this.SetCheckboxInput();
}这里用到两个this.SetTextInput()和this.SetCheckboxInput()两个方法，各自是在子类中实现，用以依照定制化需求，载入运行不同子类函数：
SetTextInput:function(){
this.textAddClass();
this.setTextDefaultVal();
this.setTextVal();
}通用类，还用到一个onBeforeRender回调方法。用以在数据还没有渲染到模板时，对数据进行处理。
onBeforeRender:function(){
this.standLabel();//标准化标签
}这样处理的优势在于，逻辑更清晰，而且充分利用此回调函数时序上的优势。
- 对差异代码模块化，写入通用类的空方法中。
- 仅仅有变量差异的代码，写入通用类中带參数方法中。
- 最后调用方法，写在通用类中，并在子类中，构造定制化载入方法如SetTextInput方法的职能。
以上是关于js判断输入框及提交的主要内容，如果未能解决你的问题，请参考以下文章