jQuery验证文本框内容不为空

通过$.fn 扩展jQuery方法

/**
 * 校验文本是否为空
 * tips:提示信息
 * 使用方法:$("#id").validate("提示文本");
 * @itmyhome
 */
$.fn.validate = function(tips){

    if($(this).val() == "" || $.trim($(this).val()).length == 0){
        alert(tips + "不能为空!");
        throw SyntaxError(); //如果验证不通过,则不执行后面
    }
}

使用

<form action="">
    姓名: <input type="text" id="name" name="name" />
    年龄:<input type="text" id="age" name="age" />
    地址:<input type="text" id="address" name="address" />
    <input type="button" value="提交" onclick="submit();" />
</form>
function submit(){
    //调用validate()
    $("#name").validate("姓名");
    $("#age").validate("年龄");
    $("#address").validate("地址");
}

作者:itmyhome

  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是一个使用 jQuery 实现的百度用户注册页面的示例代码,包括表单验证和提示: ```html <!DOCTYPE html> <html> <head> <title>百度用户注册页面</title> <meta charset="UTF-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style> label { display: block; margin-top: 10px; } input[type="text"], input[type="password"], select { width: 200px; padding: 5px; border: 1px solid #ccc; border-radius: 5px; margin-top: 5px; } .error { color: red; font-size: 12px; margin-top: 5px; } </style> </head> <body> <h1>百度用户注册</h1> <form id="registerForm"> <label for="username">用户名</label> <input type="text" id="username" name="username"> <span id="username_error" class="error"></span> <label for="password">密码</label> <input type="password" id="password" name="password"> <span id="password_error" class="error"></span> <label for="password2">确认密码</label> <input type="password" id="password2" name="password2"> <span id="password2_error" class="error"></span> <label for="gender">性别</label> <select id="gender" name="gender"> <option value="">请选择</option> <option value="male">男</option> <option value="female">女</option> </select> <span id="gender_error" class="error"></span> <label for="email">电子邮件</label> <input type="text" id="email" name="email"> <span id="email_error" class="error"></span> <input type="submit" value="提交"> </form> <script> function validateUsername() { var username = $('#username').val(); var error = $('#username_error'); if (!username) { error.text('用户名不能为空'); return false; } if (username.length < 4 || username.length > 12) { error.text('用户名长度必须为4~12个字符'); return false; } error.text(''); return true; } function validatePassword() { var password = $('#password').val(); var error = $('#password_error'); if (!password) { error.text('密码不能为空'); return false; } if (password.length < 6 || password.length > 12) { error.text('密码长度必须为6~12个字符'); return false; } error.text(''); return true; } function validatePassword2() { var password = $('#password').val(); var password2 = $('#password2').val(); var error = $('#password2_error'); if (!password2) { error.text('确认密码不能为空'); return false; } if (password !== password2) { error.text('两次输入的密码不一致'); return false; } error.text(''); return true; } function validateGender() { var gender = $('#gender').val(); var error = $('#gender_error'); if (!gender) { error.text('请选择性别'); return false; } error.text(''); return true; } function validateEmail() { var email = $('#email').val(); var error = $('#email_error'); if (!email) { error.text('电子邮件不能为空'); return false; } if (email.indexOf('@') === -1 || email.indexOf('.') === -1) { error.text('电子邮件格式不正确'); return false; } error.text(''); return true; } $(function() { $('#username').blur(validateUsername); $('#password').blur(validatePassword); $('#password2').blur(validatePassword2); $('#gender').blur(validateGender); $('#email').blur(validateEmail); $('#registerForm').submit(function() { return validateUsername() && validatePassword() && validatePassword2() && validateGender() && validateEmail(); }); }); </script> </body> </html> ``` 这段代码实现了一个基本的百度用户注册页面,包括用户名、密码、确认密码、性别和电子邮件等表单元素,并使用 jQuery 实现了表单验证和提示。当光标离开文本框时,验证数据合法性,如果不符合要求,则给出提示。提交表单时使用 `submit()` 方法验证数据的合法性,根据验证函数的返回值来决定是否提交表单。其中,用户名不能为空,长度为4~12个字符;密码长度为6~12个字符,两次输入密码必须一致;必须选择性别;电子邮件地址不能为空,并且必须包含字符“@”和“.”。验证提示信息显示在对应表单元素后面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值