Form验证简单例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xxx</title>
<style>
    fieldset{margin:0;padding:0;border:0 none;}
    html{background:#ccc}
</style>
<script src="jquery1.10.1.js"></script>
<script src="formcheck.js"></script>
</head>
<body>

<form name="test"  method="post">

账号<input type="text" name="userid"  /><br />
密码<input type="password" name="pwd"  /><br />
密码确认<input type="password" name="pwd2"  /><br />

性别<input type="radio" name="sex"  value="1" /><input type="radio" name="sex"  value="2" /><br />

爱好
    <input type="checkbox" name="hobby[]"  value="1" />足求
    <input type="checkbox" name="hobby[]"  value="2" />篮球
    <input type="checkbox" name="hobby[]"  value="3" />乒乓球
    <br />

城市
    <select name="city" >

        <option value="">请选择</option>
        <option value="1">延吉</option>
        <option value="2">吉林</option>
        <option value="3">长春</option>
        <option value="4">北京</option>
        </select>
    <br />
文件    <input type="file" name="files"  /><br />
介绍    <textarea name="text" ></textarea><br />

<input type="submit" value="提交" >

</form>


<script>

    // $(原始JS对象),
    // JQUERY对象
 //除了图片以外,  基本DOM 加载完毕后 执行



/*
(function(){
    var a = 10;
    var b = 20;
})();


$(document).ready(function(){
    alert(a); // 10
})



// 包括 图片宽高是未知的。, 网页完整加载完毕后
$(window).load(function(){
    alert(a); // 10
});
*/










/*

$('#test').submit(function(){


    if($.trim(this.userid.value).length === 0) {
        alert('请输入urserid');
        this.userid.focus();
        return false;
    }

    if(this.userid.value.length < 4 || this.userid.value.length > 20) {
        alert('4~20자 사이로 해주세요.');
        this.userid.focus();
        return false;
    }

    if(!/^[a-z][a-z0-9]+$/i.test(this.userid.value)) {
        alert('영어숫자로 해주세요');
        this.userid.select();
        this.userid.focus();
        return false;
    }

    if($.trim(this.pwd.value).length === 0) {
        alert('请输入pwd');
        this.pwd.focus();
        return false;
    }

    if($.trim(this.pwd2.value).length === 0) {
        alert('请输入pwd2');
        this.pwd2.focus();
        return false;
    }

    if(this.pwd.value!== this.pwd2.value) {
        alert('两次输入密码不相同');
        this.pwd.select();
        this.pwd.focus();
        return false;
    }

    if($(this.sex).filter(":checked").length === 0) {
        alert('请选择性别');
        $(this.sex).eq(0).focus();
        return false;
    }

    if($(this.elements['hobby[]']).filter(":checked").length === 0) {
        alert('请选择爱好');
        $(this.elements['hobby[]']).eq(0).focus();
        return false;
    }


    if(this.city.value.length === 0) {
        alert('请选择城市');
        this.city.focus();
        return false;
    }

    if(this.files.value.length === 0) {
        alert('请选择文件');
        this.files.focus();
        return false;
    }

    if($.trim(this.text.value).length === 0) {
        alert('请输入内容');
        this.text.focus();
        return false;
    }


})


*/



var rule = [
    {
        'name':'pwd',
        'rules': [
            {'type':'required', 'msg':'userid입력해주세요'},
            {'type':'length', 'value':'2:8',  'msg':'길이는 2~8이여야 합니다'},
            {'type':'pattern', 'value':/^[a-z][a-z0-9]+$/ ,'msg':'아이숫자여야합니다'},
            {'type':'equalto', 'value':'pwd2', 'msg':'fffffffffffff' },
            {'type':'function', 'value':function(elm){

               if( $(elm).filter(":checked").length < 2)
                return false;
                else return true;
            }, 'msg':'xxxxxxxxxxx' }
        ]
    },

    {
        'name':'pwd',
        'rules': [
            {'type':'required', 'msg':'pwd입력'},
            {'type':'length', 'value':'2:8',  'msg':'길이는 2~8이여야 합니다'}
        ]

    },

    {'name':'sex', 'rules': [{'type':'required', 'msg':'aa선택해주세요.'}]},
    {'name':'hobby[]', 'rules': [{'type':'required', 'msg':'xx선택해주세요.'}]},

];


</script>

</body>
</html>

 

posted @ 2014-09-30 07:56  appsolution  阅读(187)  评论(0)    收藏  举报