如何在jQuery中获取`form.field.value`

How to get `form.field.value` in jQuery?

本文关键字：form field value 获取 jQuery      更新时间：2023-09-26

在javascript中，我可以在提交时验证表单，如下所示：-

<form action="" method="post" onsubmit="return validate(this)">
    <input type="text" name="uName" id="uName" />
    <input type="password" name="passKey" id="passKey" />
    <input type="submit" name="loginBtn" value="login" />
</form>
<script type="text/javascript">
function validate(loginForm){
    if(loginForm.uName.value == ''){
        alert('Please Enter Username');
        loginForm.uName.focus();
    }else if(loginForm.passKey.value == ''){
        alert('Please Enter Password');
        loginForm.passKey.focus();
    }else {
        return true;
    }
}
</script>

我尝试了以下jQuery代码

<form action="" method="post">
    <input type="text" name="uName" id="uName" />
    <input type="password" name="passKey" id="passKey" />
    <input type="submit" name="loginBtn" value="login" />
</form>
<script type="text/javascript">
    $('form').submit(function(loginForm){
        if(loginForm.uName.val() == ''){
            alert('Please enter username');
            loginForm.uName.focus();
        }else if(loginForm.passKey.val() == ''){
            alert('Please enter username');
            loginForm.passKey.focus();
        }else {
            return true;
        }
        return false;
    });
</script>

但对我不起作用…请帮帮我。。。！

这样？

$('#submit').click(function(){
    if( $('#uName').val() == ''){
        alert('empty');
    }
});

http://jsfiddle.net/TTmYk/

提交表单中有一个打字错误，你可能需要修复

请参阅表单字段jQuery插件：https://github.com/webarthur/jquery-fields

您可以按如下方式使用插件：

var form = $('form#id_form').fields();
form.name.val('Arthur');
form.age.hide();
form.description.css('height', 200);

或者这样：

var form = $('form#id_form').fieldValues();
form.name('Arthur');
form.age(29);
form.description('Web developer.');
var name = form.name();

提交回调函数中的参数不是元素，而是事件。因此，在回调中，this表示form元素，因此您可以只执行this.uName.value，也可以避免使用id。所以

$('form').submit(function(e){
        if(this.uName.value == ''){
            alert('Please enter username');
            this.uName.focus();
        }else if(this.passKey.value == ''){
            alert('Please enter username');
            this.passKey.focus();
        }else {
            return true;
        }
        return false;
    });

Fiddle

另外，val()是jquery方法，在纯javascript中，您将使用value，在这种情况下，这应该足够了。

这将帮助您：

jQuery(function($) {
    var $username = $('#uName'),
        $password = $('#passKey');
    $('form').submit(function() {
        if ($username.val() == '') {
            alert('Please enter username');
            $username.focus();
        } else if($password.val() == '') {
            alert('Please enter username');
            $password.focus();
        } else {
            return true;
        }
        return false;
    });
});

你需要记住的几点：

  1. 如果您要使用DOM，您应该将代码封装在jQuery(function() { ... });块中
  2. 如果要使用jQuery访问DOM元素，则需要在使用$(...)之前选择
相关文章：