`

FORM表单验证

阅读更多

方法一:利用form的onsubmit()函数(经常使用)
Html代码 

<script type="text/javascript">  
    function validateForm(){  
    if(document.reply.title.value == ""){ //通过form名来获取form  
        alert("please input the title!");  
        document.reply.title.focus();  
        return false;  
    }     
    if(document.forms[0].cont.value  == ""){ //通过forms数组获取form  
        alert("please input the content!");  
        document.reply.cont.focus();  
        return false;  
    }  
    return true;  
  } 
</script> 
<form name="reply"  method="post" onsubmit="return validateForm( );">  
        <input type="text" name="title"  size="80" /><br />  
        <textarea name="cont" cols="80" rows="12"></textarea><br />  
        <input type="submit" value="提交" >  
</form>  

 
注意: 
1.onsubmit属性内容一定要有return关键字,否则函数会直接执行,不会返回 
2.validateForm一定要返回一个boolean类型的返回值 
3.提交按钮要写成submit类型的 
 
 
方法二:利用input类型为submit组件的onclick()函数
 
    1.将上面form标签中的onsubmit="return validateForm()"属性,去掉。
 
    2.为“提交”按钮添加onclick事件,如下:
 
     <input type="submit" value="提交" onclick="return validateForm();">
 
方法三:利用button组件的onclick()函数,手动提交
 
Html代码 

<script type="text/javascript">  
    function modifyItem() {  
        if (trim(document.getElementById("itemName").value) == "") {  
           alert("物料名称不能为空!");  
            document.getElementById("itemName").focus();  
            return;  
        }   
        with (document.getElementById("itemForm")) {  
            method = "post";  
            action = "item.do?command=modify&pageNo=${itemForm.pageNo}";  
            submit();  
        }  
    }  
    //返回  
    function goBack() {  
        window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}";  
    }  
</script>  
<form name="itemForm" id="itemForm">  
      <input name="itemNo" type="text"   id="itemNo" value="${ item.itemNo }" >  
      <input name="itemName" type="text"   id="itemName" value="${ item.itemName }" >  
     <input name="btnModify"  type="button" id="btnModify" value=“修改" onclick="modifyItem()">  
</form>  

 
注意: 
1.提交时,设置form的action和methods属性,然后利用form.submit()函数提交。 
 
 总结:
 
       1.对form中的组件验证时,前两个使用的是name属性,包括form自身的。
 
       2.如果提交表单时没有反应,同时确定提交表单部分代码没有问题,请查看提交表单前面的js代码,有时前面js的错误会引发莫名其妙的问题。

分享到:
评论

相关推荐

    Python关于 Django 的web- Form 表单验证

    在Python的Web开发框架Django中,Form表单验证是一个至关重要的部分,它允许开发者创建用户界面并确保从用户那里接收到的数据是有效且安全的。Form类是Django提供的一个强大工具,用于处理HTTP请求中的数据,进行...

    jquery form 表单验证神器

    jQuery Form 验证插件充分利用了jQuery的优势,使得开发者可以通过简单的API调用来实现复杂的表单验证功能。 **HTML**(HyperText Markup Language)是网页制作的基础,而**form**元素则是HTML中的表单标签,用于...

    form表单验证.rar

    "form表单验证.rar" 提供的是一组使用JavaScript实现的经典表单验证特效动画,可以帮助开发者学习和理解如何优雅地处理用户输入的验证过程。下面我们将详细探讨JavaScript、前端开发、HTML和CSS在表单验证中的应用。...

    Form表单验证(服务器控件、HTML控件)

    在网页开发中,Form表单验证是不可或缺的一部分,它确保用户输入的数据符合预期,从而防止错误数据进入系统或数据库。本篇文章将详细讲解如何在Asp.net环境下进行Form表单验证,包括服务器控件和HTML控件的验证,...

    万能Form表单验证

    "万能Form表单验证"是一种高效且灵活的解决方案,它提供了全面的验证功能,包括中文字符、数字以及电话号码等多种数据类型的验证。下面将详细阐述这个主题。 一、表单验证的重要性 表单验证的主要目的是确保用户...

    jquery form表单验证的列子

    ### jQuery Form 表单验证概述 在网页开发中,表单验证是非常重要的一步,它可以确保用户输入的数据符合预期格式或类型,从而提高用户体验并减少服务器端的压力。jQuery提供了一个强大的插件——jQuery Validate,...

    Django之Form表单验证及Ajax验证方式汇总

    本教程将详细讲解Django的Form表单验证以及如何结合Ajax实现无刷新验证。 首先,Django Form表单验证涉及以下关键概念: 1. **定义Form类**:在Django中,你需要创建一个继承自`forms.Form`或`forms.ModelForm`的...

    jquery的form表单验证

    jQuery的form表单验证不仅提供了丰富的预设规则,还允许灵活的自定义,使得开发者可以轻松地实现各种复杂的验证逻辑,提升用户体验并确保数据质量。结合实际的业务场景,合理运用这些验证方法和规则,可以构建出...

    form表单验证

    本教程将深入探讨“form表单验证”,包括结合Ajax实现的实时反馈机制,以及使用HTML、CSS、JavaScript和jQuery来构建一个功能完善的表单验证系统。 首先,我们来看HTML中的表单元素。`&lt;form&gt;`标签用于定义表单,...

    jquery插件(form表单验证)

    本篇文章将深入探讨“jQuery插件:form表单验证”这一主题,包括其工作原理、如何调用以及实际应用。 表单验证是Web应用程序中的一个关键部分,确保用户输入的数据符合预设的规则,防止错误数据的提交。jQuery插件...

    jquery之form表单验证大全.rar

    "jquery之form表单验证大全.rar"这个资源集合了多种使用jQuery实现的表单验证方法,包括各种验证规则和精美的样式,是开发者学习和参考的宝贵资料。 **一、jQuery表单验证的基本原理** jQuery的表单验证主要是通过...

    form表单验证板模板

    在网页开发中,表单(Form)是收集用户数据的重要工具,而表单验证则是确保用户输入的数据符合预期格式和规则的关键步骤。本教程将详细讲解如何使用HTML、JavaScript中的`onfocus()`和`onblur()`事件来实现邮箱注册...

    vue element el-form多表单验证.txt

    ### Vue Element UI 多表单验证详解 在前端开发中,表单验证是十分重要的环节之一,它确保了用户输入的数据格式正确、有效,避免了因数据错误导致的后端处理异常或用户体验下降等问题。而在使用 Vue.js 搭配 ...

    php的form表单验证类

    一个php的form表单验证类,检查输入的是否为数字,检查输入的是否为电话,检查输入的是否为手机号,检查输入的是否为邮编,邮箱地址合法性检查,姓名昵称合法性检查,只能输入中文英文,检查一个(英文)域名是否...

    使layui.js form 可主动验证表单是否通过

    使layui.js form 可主动验证表单是否通过。扩展layui下的form.js 。文章链接 https://blog.csdn.net/qq_17837497/article/details/107505486

    js form表单验证

    js表单验证,有了它。其它js代码全免了

    jquerform 表单验证

    **jQuery Form 表单验证详解** 在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,从而防止错误数据的提交,提高用户体验。jQuery Form验证插件提供了一种简单而强大的方式来实现这一...

    js表单验证 全网最全的 表单验证

    `form表单验证`是JavaScript验证的核心部分。HTML `&lt;form&gt;`元素用于创建表单,而JavaScript则用来处理表单事件,如`onsubmit`、`onchange`等,用于在用户提交或更改输入时执行验证逻辑。例如,可以使用`event....

    vue-form表单验证是否为空值的实例详解

    总结一下,这个 Vue-form 表单验证实例展示了如何利用 Vue 的响应式系统和事件处理来实现表单验证。通过绑定数据、监听表单事件以及编写验证逻辑,我们可以创建出一个能够有效处理用户输入并提供反馈的交互式表单。...

Global site tag (gtag.js) - Google Analytics