フォーム送信のJavaScript検証

日々の開発では、我々は、サーバーを認証するために行くことを避けることができるように、法的な判断かどうか、JavaScriptのフォーム送信を使用する傾向があります。

まず、JavaScriptがフォーム要素の値を取得する方法を見

<form action="#" method="post">
        <span>姓名:</span><input type="text" name="userName" id="name" required/></br>//required表示必须填写该字段 不然提交不了 
        <span>密码:</span><input type="password" name="password" id="password"/></br>
        <span>性别:</span><input type="radio" name="gender" id="boy" value="man"/>男
        <input type="radio" name="gender" id="girl" value="woman"/>女</br>
        <span>科目:</span><input type="checkbox" name="box1" checked/><span>Java</span>
        <input type="checkbox" name="box2" checked/><span>Python</span>
        <input type="checkbox" name="box3"/><span>C++</span>
        <input type="checkbox" name="box4"/><span>PHP</span><br>
        <span>爱好:</span>
        <select name="selector" id="selector">
            <option value="sing">唱</option>
            <option value="dance">跳</option>
            <option value="rap">Rap</option>
            <option value="basketball">篮球</option>
        </select>

    </form>
    <script type="text/javascript">
        let userName = $('#name');
        console.log(userName.val());//获得text/password文本框的值
        let boy_radio = document.getElementById('boy');
        let girl_radio = document.getElementById('girl');
        //我们查看选择框（单选框、复选框) 不能直接得到选择元素的值
        //需要遍历它的所有选择节点 查看是否checked = true 如果是 则被选中。
        console.log(boy_radio.checked);//查看boy_radio这个元素是否被选中
        console.log(girl_radio.checked);//查看girl_radio这个元素是否被选中
        girl_radio.checked = true;//还可以人为的控制他们是否被选中
    </script>

ONSUBMITは、フォームはformタグにtrueまたはfalseを返すことによって提出されているかどうかを制御する機能に設定することが可能という特性を持っています

<form action="#" method="post" onsubmit="return fun1()">
        .....
</form>

<script type="text/javascript">
        function fun1(){
           .....
            //如果校验通过 返回true允许通过
            //否则返回false 不允许通过
            return true;
	}
</script>

私たちが必要とするように、ユーザー・パスワードのプライバシーのためにこの1つは、我々は、我々はもちろん、これを提出したフォームのすべての要素の値を見ることができます（Etherealの）クロールによって提出された任意の形式に対処していない場合はできません。このパスワードレセプション値ボックスの処理

MD5パスワード暗号化アルゴリズムを使用します

	<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> //引入文件
	
	<script type="text/javascript">
        function fun1(){
            let userName = $('#name');
            let password = $('#password');
            password.val(md5(password.val()));//将密码框中的值使用md5算法加密
		}