表单的一些基本用法与技巧

1、 用图像代替提交按钮
　当只有一个提交按钮的时候，可以简单地实现，不用加事件函数，代码是：
　<input type="image" name="..." src="url" width="" height="..." border="...">
　除了标签改为input type="image"以外，其它的属性和<img>标签的属性是一样的。

　2、用图片代替所有的表单按钮：
　代替submit按钮的图片代码格式是
　<input type="image" name="..." src="..." onClick="document.formName.submit()">
　代替reset按钮的代码图片格式是
　<input type="image" name="..." src="..." onClick="document.formName.reset()">
　注：这里的formName是表单的name属性值。

　3、表单的提交验证：
　<script>
　function CheckDate(){
　//取得输入的数据
　userName = document.RedForm.userName.value;
　userEmail = document.RedForm.userEmail.value;
　//如果没有输入姓名
　if (userName=="") {
　alert("请输入姓名");
　document.RedForm.userName.focus();
　return false;
　}else{
　//如果没有输入Email，或者Email地址错误(不含@)
　if ((userEmail=="")||(userEmail.indexOf("@")==-1)) {alert("请重新输入Email地址");
　document.RedForm.userEmail.focus();
　return false;
　}else return true;
　}
　}
　</script>

　4、用任何元素提交表单：
　通过onClick="document.form.submit();"来提交表单；用onClick="document.form.reset();"来复位表单，这样一来，任何一个元素都可以实现提交表单了。

赞 (0)

相关推荐

  • 表单的一些基本用法与技巧

    1. 用图像代替提交按钮 当只有一个提交按钮的时候,可以简单地实现,不用加事件函数,代码是: <input type="image" name="..." src="url" width="" height="..." border="..."> 除了标签改为input type="image"以外,其它的属性和<img>标签的属性是一样的.

  • jQuery表单元素过滤选择器用法实例分析

    本文实例讲述了jQuery表单元素过滤选择器用法.分享给大家供大家参考,具体如下: 前面jQuery内容过滤选择器与子元素过滤选择器,其中的例子稍微多一些解释也有点绕口,希望能帮助大家理解.今天学习表单元素过滤选择器,下面请看使用方法. 一.:enabled 选择器::enabled 描述:匹配所有可用元素 返回值:元素集合 示例: $("input.mini:enabled") //input.mini是DOM元素集合,:enabled是过滤条件 二.:disabled 选择器::d

  • jQuery表单域属性过滤器用法分析

    jQuery表单域属性过滤器用法分析

    本文实例讲述了jQuery表单域属性过滤器用法.分享给大家供大家参考.具体分析如下: 表单内包含各种各样的表单域,使用表单域属性选择器可以很好的获取已被选中的单选按钮,复选框以及列表项,也可以根据是否可用从文档中查找表单域. 1. :checked选择器 用于选择所有被选中的表单域.格式: 复制代码 代码如下: $("selector:checked") 可以是input,radio和checkbox 2. :enabled选择器 用于选择所有可用的表单域,格式: 复制代码 代码如下:

  • JQuery表单验证插件EasyValidator用法分析

    JQuery表单验证插件EasyValidator用法分析

    本文实例讲述了JQuery表单验证插件EasyValidator用法.分享给大家供大家参考.具体如下: 本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针对不同用户特殊需求,自行写正则吧. EasyValidator实现的功能: 1.提示功能(在表单或者其他标签中加入tip="想提示的文字") 如: 复制代码 代码如下: <inp

  • Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解

    本文实例讲述了Bootstrap简单实用的表单验证插件BootstrapValidator用法.分享给大家供大家参考,具体如下: Bootstrap是现在非常流行的一款前端框架,这篇来介绍一款基于Bootstrap的验证插件BootstrapValidator. 先来看一下效果图(样式是不是还不错O(∩_∩)O哈哈~). Bootstrapvalidator下载地址:https://github.com/nghuuphuoc/bootstrapvalidator/? 引入对应的CSS和JS <l

  • 关于表单的两点交互体验改进技巧

    想必大家在页面都使用过表单,如果你对单调的表单控制单元不满意,不妨看看以下几条技巧: 1.表单文本输入的移动选择:在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <textarea> 中,一切就会变得简单多了,如: Input English.. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行

  • jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码

  • jquery validate表单验证的基本用法入门

    jquery validate表单验证的基本用法入门

     一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要

  • 推荐个不错的表单Input的高级用法11例

    1.取消按钮按下时的虚线框  在input里添加属性值 hideFocus 或者 HideFocus=true 2.只读文本框内容  在input里添加属性值 readonly 3.防止退后清空的TEXT文档(可把style内容做做为类引用)  <INPUT style=behavior:url(#default#savehistory); type=text id=oPersistInput> 4.ENTER键可以让光标移到下一个输入框  <input onkeydown="

  • 一个即时表单验证的javascript代码

    可爱吧--教你做可爱女人--化妆 美容 美化 瘦身 护肤--深圳可爱吧 // 此脚本由刘海民编写 // 网站:http://www.szrgb.net // 邮箱:lovelium@gmail.com var num=5; var mon1=0; var mon2=0; var mon3=0; var mon4=0; var mon5=0; //封装得到对像ID涵数 function getObj(objName){return(document.getElementById(objName))

随机推荐