使用Query 进行空值(empty)校验

最新推荐文章于 2022-01-13 18:40:48 发布

Rank92

最新推荐文章于 2022-01-13 18:40:48 发布

阅读量1.9k

点赞数

文章标签： javascript ViewUI

效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
     fieldset{width: 500px;}
     .error{color:red;}
     #info{color:#008000;font-weight:bold;}
    </style>
    <script type="text/javascript" src="../../js/jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#check').click(validate); 
        
        function validate(){
        var dataValid=true;
        $('#info').html('');
        $('.required').each(function(){
            var cur=$(this);
            cur.next('span').remove();
            if($.trim(cur.val())==''){
            cur.after('<span class="error">Mandatory field</span>')    ;
            dataValid=false;
            }    
        });    
        if(dataValid){
            $('#info').html('Validation OK!');    
        }
        }   
    }); 
    </script>
</head>
<body>
    <form>
        <fieldset>
        <legend><strong>Personal</strong></legend>
        <table>
        <tbody>
            <tr>
            <td>Name:*</td>
            <td><input type="text" class="required"/></td>
            </tr>
            <tr>
            <td>Address:*</td>
            <td><input type="text" class="required"/></td>
            </tr>
        </tbody>
        </table>
    </fieldset>
    <br/>
    <span id="info"></span>
    <br/>
    <input type="button" value="Check" id="check"/>
    </form>
</body>
</html>

Rank92

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Query 进行空值(empty)校验

效果如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&amp
复制链接

扫一扫