[] 뷰 뷰 전단 전단 등록 업체가 달성! ! ! [코드]

등록 된 사용자 프런트 엔드 로직

 

1. 뷰 등록 인터페이스 준비 바인딩

1. 가져 오기 Vue.js 라이브러리 및 라이브러리 아약스 요청

<script 타입 = "텍스트 / 자바 스크립트"SRC = "{{정적 (년대 JS / VUE-2.5.16.js ')}}"> </ script> 
<script 타입 = "텍스트 / 자바 스크립트"SRC = "{{ 정적 (년대 JS / Axios의-0.18.0.min.js ')}} "> </ script>

　　

 

2. register.js 파일을 준비합니다

<스크립트 유형 = "텍스트 / 자바 스크립트"SRC는 = "{{정적 ( '의 JS / register.js')}}"> </ script>

　　

2. 뷰 달성 등록 인터페이스 바인딩

뷰 문서

• 중요 : 뷰는 예를 들어, 등록 양식 및 사용자 이름과 암호를 바인딩

1.register.html

• 바인드 내용 : 변수, 이벤트, 오류 메시지 등

<양식 방법 = "POST"클래스 = "register_form"@ 제출 = "on_submit"> 
    {{csrf_input}} 
    <UL> 
        <LI> 
            <레이블>用户名: </ 라벨> 
            <입력 유형 = "텍스트"이름 = " 사용자 _ "ID ="사용자 _ "V 모델 ="이름 "@ 흐림 ="check_username "> 
            <스팬 클래스 ="error_tip "V 쇼 ="error_username "> [error_username_message] </ SPAN> 
        </ 리> 
        < 리> 
            <라벨>密码</ 라벨> 
            <input 타입 = "비밀번호"NAME = "PWD"ID = "PWD"V 모델 = "비밀번호"@ = "은 check_password를"흐림>
            <스팬 클래스 = "error_tip"V 쇼 = "error_password"> [error_password_message] </ SPAN> 
        </ 리> 
        <LI> 
            <라벨>确认密码</ 라벨>
            <input 타입 = "비밀번호"NAME = "cpwd"ID = "cpwd"V 모델 = "암호 2"@ 흐림 = "check_confirm_password"> 
            <스팬 클래스 = "error_tip"V 쇼 = "error_confirm"> [error_confirm_message] ] </ SPAN> 
        </ 리> 
        <LI> 
            <라벨>手机号</ 라벨> 
            <input 타입 = "텍스트"NAME = "전화"ID = "전화"V 모델 = "모바일"@ 흐림 = " check_mobile "> 
            <스팬 클래스 ="error_tip "V 쇼 ="error_mobile "> [error_mobile_message] </ SPAN> 
        </ 리> 
        <LI> 
                            <라벨>图形验证码</ 라벨>
                            <input 타입 = "텍스트"NAME = "pic_code"ID = "pic_code"클래스 = "msg_input">
                            <IMG SRC = "/ 정지 / 이미지 / pic_code.jpg"ALT = "图形验证码"클래스 = "pic_code">  
                            <스팬 클래스 = "error_tip"> 패턴 코드를 기입하세요 </ SPAN>
                        </ 리> 
        <LI> 
            <라벨>短信验证码</ 라벨> 
            <input 타입 = " 텍스트 "이름 ="는 msg_code "ID ="는 msg_code "클래스 ="msg_input "> 
            <A HREF ="자바 스크립트 :; " 클래스 = "get_msg_code">获取短信验证码</a>을 
            <스팬 클래스 = "error_tip">请填写短信验证码</ SPAN> 
        </ 리> 
        <LI 클래스 = "계약"> 
            <input 타입 = "체크 박스" =이 ID가 = 확인 "허용" "허용"이름 => V-모델 = "허용" "확인"
        <리 클래스 = "reg_sub"> 
            <input 타입 = "제출"값 = "注册">  
        </ 리> 
    </ UL>
    </ FORM>

　　

2.register.js

• 바인드 내용 : 변수, 이벤트, 오류 메시지 등
• 사용자 상호 작용 이벤트 실현 (register.js)

var에 VM = 새로운 뷰 ({ 
    엘 : '# 응용 프로그램', 
    구분 기호 : "[[", "]]"], 
    데이터 : { 
        //接收参数
        이름 : '' 
        암호 '' 
        암호 2 : '', 
        모바일 : '' 
        수 '', 
        //提示标记
        error_username : 거짓, 
        error_password : 거짓, 
        error_confirm : 거짓, 
        error_mobile : 거짓, 
        error_allow : FALSE, 
        //错误信息展示
        error_username_message : '', 
        error_password_message : '', 
        error_confirm_message : '', ' 
        ', : error_mobile_message '
        error_captcha_message : '',
        error_allow_message : '' 
    }
    방법 : { 
        // 테스트 사용자 이름 
        check_username : 함수 () { 
            송출 재 = / ^ [A-ZA-Z0-9 _ {5,20} $ /; 
            IF (re.test (this.username)) { 
                은이. = 거짓 error_username에; 
            }는 다른 { 
                this.error_username_message = '사용자 5-20 문자를 입력'; 
                true로 this.error_username =; 
            } 
        } 
        // 암호가 감지 
        은 check_password : {() 함수 
            송출 다시 = / ^ [A- Z0-9-ZA] {8,20} $ /; 
            IF (re.test (this.password)) { 
                this.error_password = false로;  
            }는 {다른
                this.error_password_message = '8-20 문자 암호를 입력'; 
                this.error_password = TRUE;
            } 
        } 
        // 암호 확인하는 테스트 
        check_confirm_password을 : 함수 () { 
            IF (! = This.password2의 this.password) { 
                this.error_confirm = true로; 
                this.error_confirm_message = '암호가 일치하지 않습니다' 
            }는 다른 사람을 { 
                this.error_confirm 거짓 = 단계; 
            } 
        } 
        // 전화 번호를 검출 
        check_mobile을 : 함수 () { 
            송출 재 = / ^ 1 [3-9] \ {D} 9 $ /;.. 
            IF (re.test (this.mobile)) { 
                이 본한다. = 거짓 error_mobile에, 
                this.error_mobile_message = "유효한 전화 번호를 입력하십시오"; 
            } 
            }는 {다른
                this.error_mobile = TRUE; 
        } 
        //提交注册按钮
        on_submit : 함수 () { 

            this.check_username (); 
            this.check_password (); 
            this.check_confirm_password (); 
            this.check_mobile (); 

            경우 (참 this.error_username == || this.error_password == 진정한 || this.error_confirm == 진정한 || this.error_mobile == TRUE) { 
                window.event.returnValue = 거짓; 
            } 

        } 
    } 
})