使用jquery进行动态表单字段验证

时间:2010-12-27 10:31:08

标签: jquery

您正在基于数据库密钥动态生成输入框。

 <input type="text" id="101" name="101"> 
 <input type="text" id="302" name="302">
 <input type="text" id="501" name="501">
 <input type="text" id="601" name="601">

我想让它成为必填字段+最大长度验证检查 使用jquery

2 个答案:

答案 0 :(得分:3)

查看http://docs.jquery.com/Plugins/validation

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
</style>

<script>
$(document).ready(function(){
    $("form[name=validation]").validate()
});
</script>

<form name="validation" action="" method="post">
    <p>
        <label for="101">101</label>
        <input type="text" id="101" name="101" class="required" maxlength="4">
    </p>
    <p>
        <label for="302">302</label>
        <input type="text" id="302" name="302" class="required" maxlength="4">
    </p>
    <p>
        <label for="501">501</label>
        <input type="text" id="501" name="501" class="required" maxlength="4">
    </p>
    <p>
        <label for="601">601</label>
        <input type="text" id="601" name="601" class="required" maxlength="4">
    </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

答案 1 :(得分:0)

 $('input[type=text]').each(function() { 
    if($(this).val() == '')
       alert('is Null');
    if($(this).val().length > 5)
       alert('max length execced');

 })