<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <input type="text" placeholder="请输入姓名(必须是汉字)" name="xingming" id="xingming" />

    <button id="btn">点击</button>

    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    //判断是否填写姓名

    $(function() {

        $("#btn").click(function() {

            // 第一种方法:

            if ($("#xingming").val() == '') {

                $("#xingming").trigger("focus");

                alert("请填写姓名！");

                return false;

            }

            // 第二种方法

            // if (document.getElementsByName("xingming")[0].value == "") {

            //     alert("请填写姓名！");

            // }

        });

    });

    </script>

</body>

</html>

效果图：

第二种：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <form action="xm.php" method="post" onsubmit="return chkfrom_xm();">

        <div><span>男方姓名</span>

            <input type="text" name="xing1" class="input" id="xing1" />

        </div>

        <div><span>女方姓名</span>

            <input type="text" name="xing2" class="input" id="xing2" />

        </div>

        <button type="submit">点击提交</button>

    </form>

    <script type="text/javascript">

    function chkfrom_xm() {

        var xing1 = document.getElementById('xing1');

        var xing2 = document.getElementById('xing2');

        if (xing1.value == '') {

            alert('请输入男方姓名');

            return false;

        }

        if (xing2.value == '') {

            alert('请输入女方姓名');

            return false;

        }

        return true;

    }

    </script>

</body>

</html>

注意：这里要用submit。

效果图：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        *{margin:0; padding: 0;}

        .btn{ background: #ddd; width: 100px; height: 30px; line-height: 30px; text-align: center; }

        /*.red_btn{ background: red; color: #fff; width: 100px; height: 30px; line-height: 30px; text-align: center; }*/

    </style>

</head>

<body>

    <form>

        <div>姓名：<input type="text" id="username" name="" placeholder="输入您的姓名"></div>

        <div>电话：<input type="text" id="phone" name="" placeholder="输入你的手机电话"></div>

        <input type="submit" name="" value="提交" id="btn" class="btn">

    </form>

<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

    function sub(){

        // alert(1)

        var userName = $("#username");//姓名

        var phone = $("#phone");//手机号码

        var btn = $("#btn");//提交按钮

        btn.click(function(){

            //姓名

            var xm = userName.val();

            if(xm==""){

                alert("请输入姓名");

                return false;

            }

            //手机

            var sj = phone.val();

            if(sj==""){

                alert("请输入手机号码");

                return false;

            }

        });

    }

    sub();

</script>

</body>

</html>

效果图：

jQuery判断表单input的更多相关文章

  1. jquery判断表单提交是否为空

    <input type="text" value="" name="toPage"> 判断该表单是否为空 var p = $(& ...

  2. jquery判断表单内容是否为空

    //判断表单数据是否为空 var t = $('form').serializeArray(); $.each(t,function(i,item){ if(item['value'] == '') ...

  3. jQuery formValidator表单验证插件

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

  4. jquery实现表单验证简单实例

    /* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...

  5. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  6. jQuery Mobile 表单基础

    jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观. jQuery Mobile 表单结构 jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式,以使其 ...

  7. jQuery Form 表单提交插件-----formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

  8. jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  9. jQuery实现表单验证

    表单是网页的一个重要组成部分.本节做一个简单的表单提交网页然后利用jQuery实现表单的验证.后续的表单完善以及功能的完善会在以后的博客中给出. 效果图: 代码: <!DOCTYPE html ...

随机推荐

  1. spring的传播行为和隔离级别

    7个传播行为,4个隔离级别(转自 http://www.blogjava.net/freeman1984/archive/2010/04/28/319595.html) Spring事务的传播行为和隔 ...

  2. 使用AddressSanitizer做内存分析（一）——入门篇

    使用AddressSanitizer做内存分析 新建文件mem_leak.cpp,键入代码: #include <iostream> int main() { ]; p = NULL; ; ...

  3. jedis的publish/subscribe[转]含有redis源码解析

    首先使用redis客户端来进行publish与subscribe的功能是否能够正常运行. 打开redis服务器 [root@localhost ~]# redis-server /opt/redis- ...

  4. java的集合框架详解

    前言:数据结构对程序设计有着深远的影响,在面向过程的C语言中,数据库结构用struct来描述,而在面向对象的编程中,数据结构是用类来描述的,并且包含有对该数据结构操作的方法. 在Java语言中,Jav ...

  5. 十万个为什么：现在还没发现“虚函数virtual”和多态性的优点，估计是因为我还没有编程序吧。

    十万个为什么:现在还没发现“虚函数virtual”和多态性的优点,估计是因为我还没有编程序吧.

  6. OSAL的原理

    讲解协议栈怎么运行起来!!回顾:1.应用层是一个任务,它有一个系统分配给他的数值唯一的编号叫做任务ID 2.任务可以处理事件,处理事件的这些代码都在一个函数里,这个函数叫任务事件处理函数 3.应用层任 ...

  7. 实践作业4---DAY3阶段二。

    第二阶段是用户调研,我们小组选择了一个5班的同学,作为采访对象.采访比较详实,但是样本太少,不太有说服力. 具体采访详情如下: 问:请问您使用喜欢发表Blog么? 答:肯定有啊. 问:都用什么网站发表 ...

  8. [GO]接口的嵌用继承

    package main import "fmt" type Humaner interface { SayHi() } type Personer interface { Hum ...

  9. 结构光和ToF

  10. OpenCV源码解析

    OpenCV K-means源码解析 OpenCV 图片读取源码解析 OpenCV 视频播放源码解析 OpenCV 追踪算法源码解析 OpenCV SIFT算法源码解析 OpenCV 滤波源码分析:b ...