<!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. python+Django创建第一个项目

    1.首先搭建好环境 1.1 安装pyhton,Linux系统中,python是系统自带的所以就不用安装 1.2 安装Django框架 使用pip安装: pip install django 1.3 检 ...

  2. git 转移

    git push --mirror https://github.com/cloud-pi/drbd-docker-plugin.git

  3. 《Android Studio实用指南》7.1 AndroidStudio代码检查工具概述

    本文节选自<Android Studio实用指南> 作者: 毕小朋 目前本书已上传到百度阅读, 在百度中搜索[Anroid Studio实用指南]便可以找到本书. Android Stud ...

  4. 381. Insert Delete GetRandom O(1) - Duplicates allowed允许重复的设计1数据结构

    ［抄题］: Design a data structure that supports all following operations in average O(1) time. Note: Dup ...

  5. spring源码学习——spring整体架构和设计理念

    Spring是在Rod Johnson的<Expert One-On-One J2EE Development and Design >的基础上衍生而来的.主要目的是通过使用基本的java ...

  6. [GO]方法值和方法表达式

    package main import "fmt" type Person struct { name string sex byte age int } func (p Pers ...

  7. Android开发adb环境配置

    adb的全称为Android Debug Bridge,就是起到调试桥的作用. 在命令行cmd中打开adb,如果Android开发的环境配置有误,会出现如下错误提示: 解决方法,右键我的电脑-> ...

  8. Maven及POM文件

    Maven Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. Logback是由LOG4创始人设计的又一个开源日志组件. 相关链接: Ma ...

  9. （转）一个故事讲完https

    (转)一个故事讲完https 2 1  序言 今天来聊一聊https 安全传输的原理. 在开始之前,我们来虚构两个人物, 一个是位于中国的张大胖(怎么又是你?!), 还有一个是位于米国的Bill (怎 ...

  10. jmeter阶梯式加压测试

    转自:https://www.cnblogs.com/imyalost/p/7658816.html#4226560 性能测试中,有时需要模拟一种实际生产中经常出现的情况,即:从某个值开始不断增加压力 ...