m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

调整名称输入特殊字符和表情

Browse Source
dev_daiao
杨树林 5 years ago
parent 517ebc2eb4
commit a100dacc6e
1 changed files with 86 additions and 36 deletions
Show Stats Download Patch File Download Diff File

122
public/react/src/modules/user/account/AccountBasicEdit.js
Unescape View File

@ -136,7 +136,7 @@ class AccountBasic extends Component {
} }
handleSubmit = () => { handleSubmit = () => {
this.props.form.validateFieldsAndScroll((err, values) => { this.props.form.validateFieldsAndScroll({ force: true }, (err, values) => {
console.log(values); console.log(values);
let {basicInfo}=this.props; let {basicInfo}=this.props;
if(!err ){ if(!err ){
@ -148,12 +148,12 @@ class AccountBasic extends Component {
this.props.showNotification('请先选择院系/部门') this.props.showNotification('请先选择院系/部门')
return; return;
} }
let url=`/users/accounts/${basicInfo.id}.json` let url=`/users/accounts/${basicInfo.id}.json`
axios.put((url),{ axios.put((url),{
nickname:values.nickname, nickname:values.nickname,
// 认证中的不能修改 // 认证中的不能修改
name: basicInfo.authentication == 'uncertified' ? name: basicInfo.authentication == 'uncertified' ?
(this.state.showRealName ? values.name : this.state.realName ) : basicInfo.name, (this.state.showRealName ? values.name : this.state.realName ) : basicInfo.name,
show_realname:this.state.showRealName, show_realname:this.state.showRealName,
gender:parseInt(values.sex), gender:parseInt(values.sex),
@ -173,7 +173,7 @@ class AccountBasic extends Component {
} }
this.props.getBasicInfo(); this.props.getBasicInfo();
this.props.history.push('/account/profile') this.props.history.push('/account/profile')
} }
}).catch((error)=>{ }).catch((error)=>{
console.log(error); console.log(error);
@ -357,7 +357,7 @@ class AccountBasic extends Component {
}) })
} }
addOrgSuccess = (name) => { addOrgSuccess = (name) => {
// const schoolList = this.state.schoolList.slice(0) // const schoolList = this.state.schoolList.slice(0)
@ -377,7 +377,7 @@ class AccountBasic extends Component {
} }
showApplyForAddOrgModal = () => { showApplyForAddOrgModal = () => {
this.applyForAddOrgForm.setVisible(true) this.applyForAddOrgForm.setVisible(true)
} }
showApplyForAddChildOrgModal = () => { showApplyForAddChildOrgModal = () => {
let{school,schoolList}=this.state; let{school,schoolList}=this.state;
@ -385,18 +385,18 @@ class AccountBasic extends Component {
return item.name == school; return item.name == school;
}); });
if(arr.length > 0){ if(arr.length > 0){
this.applyForAddChildOrgForm.setVisible(true) this.applyForAddChildOrgForm.setVisible(true)
}else{ }else{
this.props.showNotification("请先选择正确的单位或者学校！"); this.props.showNotification("请先选择正确的单位或者学校！");
} }
} }
checkNameLength = (rule, value, callback) => { // checkNameLength = (rule, value, callback) => {
if (value && value.length <= MAX_NAME_LENGTH) { // if (value && value.length <= MAX_NAME_LENGTH) {
callback(); // callback();
return; // return;
} // }
callback(`请输入真实姓名，最大限制${MAX_NAME_LENGTH}个字符`); // callback(`请输入真实姓名，最大限制${MAX_NAME_LENGTH}个字符`);
} // }
// 切换职称 // 切换职称
changeJob=(e)=>{ changeJob=(e)=>{
this.setState({ this.setState({
@ -410,9 +410,53 @@ class AccountBasic extends Component {
}) })
} }
} }
//昵称
handleSubmitName(rule, value, callback){
if (value) {
let iconRule1 = /[`~!@#$%^&*()\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/im;
// 判断是否含有emoji表情
let iconRule2 = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
// 如果为true，字符串含有emoji表情 ，false不含
const iconRule2s =iconRule2.test(value);
// 如果为true，字符串含有特殊符号 ，false不
const iconRule1s =iconRule1.test(value);
if (iconRule2s===true|| iconRule1s===true) {
callback('2-20位中英文、数字及下划线');
}
else if(value.length<2){
callback('2-20位中英文、数字及下划线');
}else if(value.length>=21){
callback('2-20位中英文、数字及下划线');
}
}
callback();
}
// 姓名
handleSubmitNames(rule, value, callback){
if (value) {
let iconRule1 = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/im;
// 判断是否含有emoji表情
let iconRule2 = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
// 如果为true，字符串含有emoji表情 ，false不含
const iconRule2s =iconRule2.test(value);
// 如果为true，字符串含有特殊符号 ，false不
const iconRule1s =iconRule1.test(value);
if (iconRule2s===true|| iconRule1s===true) {
callback('2-10位中英文、数字');
}
else if(value.length<2){
callback('2-10位中英文、数字');
}else if(value.length>=11){
callback('2-10位中英文、数字');
}
}
callback();
}
render() { render() {
let{ let{
nameLength, nameLength,
showRealName, showRealName,
filterSchoolList, filterSchoolList,
@ -446,10 +490,10 @@ class AccountBasic extends Component {
{...propsWithoutForm} addOrgSuccess={this.addOrgSuccess} {...propsWithoutForm} addOrgSuccess={this.addOrgSuccess}
></ApplyForAddOrgModal> ></ApplyForAddOrgModal>
<ApplyForAddChildOrgModal ref="applyForAddChildOrgModal" schoolName={school} schoolId={school_id} departmentName={departmentsName} <ApplyForAddChildOrgModal ref="applyForAddChildOrgModal" schoolName={school} schoolId={school_id} departmentName={departmentsName}
{...propsWithoutForm} wrappedComponentRef={(form) => this.applyForAddChildOrgForm = form} {...propsWithoutForm} wrappedComponentRef={(form) => this.applyForAddChildOrgForm = form}
addChildOrgSuccess={this.addChildOrgSuccess} addChildOrgSuccess={this.addChildOrgSuccess}
></ApplyForAddChildOrgModal> ></ApplyForAddChildOrgModal>
<div className="basicForm courseNormalForm"> <div className="basicForm courseNormalForm">
<style>{` <style>{`
.formItemInline { .formItemInline {
@ -525,9 +569,12 @@ class AccountBasic extends Component {
{getFieldDecorator('nickname', { {getFieldDecorator('nickname', {
rules: [{ rules: [{
// initialValue: this.state.cityDefaultValue, // initialValue: this.state.cityDefaultValue,
required: true, required: true,
message: '请输入您的昵称', message: '请输入您的昵称',
}], },
{ validator: this.handleSubmitName },
],
validateTrigger: 'onSubmit', // 设置进行表单验证的时机为onSubmit
})( })(
<Input placeholder={`请输入您的昵称，最大限制${MAX_NICKNAME_LENGTH}个字符`} className="exercicenewinputysl" onInput={this.changeNickName} maxLength={MAX_NICKNAME_LENGTH} addonAfter ={ <Input placeholder={`请输入您的昵称，最大限制${MAX_NICKNAME_LENGTH}个字符`} className="exercicenewinputysl" onInput={this.changeNickName} maxLength={MAX_NICKNAME_LENGTH} addonAfter ={
<span className="color-grey-6 font-13">{String(nameLength)}/{MAX_NICKNAME_LENGTH}</span> <span className="color-grey-6 font-13">{String(nameLength)}/{MAX_NICKNAME_LENGTH}</span>
@ -552,18 +599,21 @@ class AccountBasic extends Component {
{ basicInfo.authentication == 'uncertified' ? <React.Fragment>{getFieldDecorator('name', { { basicInfo.authentication == 'uncertified' ? <React.Fragment>{getFieldDecorator('name', {
rules: [{ rules: [{
// initialValue: this.state.cityDefaultValue, // initialValue: this.state.cityDefaultValue,
required: true, required: true,
message: `请输入真实姓名，最大限制${MAX_NAME_LENGTH}个字符`, message: `请输入真实姓名，最大限制${MAX_NAME_LENGTH}个字符`,
validator: this.checkNameLength },
}], { validator: this.handleSubmitNames },
],
validateTrigger: 'onSubmit', // 设置进行表单验证的时机为onSubmit
})( })(
<Input placeholder={`请输入真实姓名，最大限制${MAX_NAME_LENGTH}个字符`} className="yslgraduainputedit" disabled={!showRealName && this.state.forDisable == true } addonAfter={ <Input placeholder={`请输入真实姓名，最大限制${MAX_NAME_LENGTH}个字符`} className="yslgraduainputedit" disabled={!showRealName && this.state.forDisable == true } addonAfter={
<i className={showRealName?"iconfont icon-xianshi font-18 color-blue":"iconfont icon-yincang font-18 color-blue"} <i className={showRealName?"iconfont icon-xianshi font-18 color-blue":"iconfont icon-yincang font-18 color-blue"}
onClick={()=>this.showOrHide(showRealName)}></i> onClick={()=>this.showOrHide(showRealName)}></i>
}></Input> }></Input>
)} )}
<span>{ showRealName ? '（显示：平台将显示您的真实姓名）' : '（隐藏：平台将显示你的昵称）' }</span> <span>{ showRealName ? '（显示：平台将显示您的真实姓名）' : '（隐藏：平台将显示你的昵称）' }</span>
</React.Fragment> : </React.Fragment> :
<div className="df" style={{}}> <div className="df" style={{}}>
<Tooltip title="已完成实名认证，不能修改"> <Tooltip title="已完成实名认证，不能修改">
<span className="mr8" >{showRealName ? this.props.basicInfo.name : getHiddenName(this.props.basicInfo.name)}</span> <span className="mr8" >{showRealName ? this.props.basicInfo.name : getHiddenName(this.props.basicInfo.name)}</span>
@ -573,7 +623,7 @@ class AccountBasic extends Component {
<span>{ showRealName ? '（显示：平台将显示您的真实姓名）' : '（隐藏：平台将显示你的昵称）' }</span> <span>{ showRealName ? '（显示：平台将显示您的真实姓名）' : '（隐藏：平台将显示你的昵称）' }</span>
</div> </div>
} }
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="性别" label="性别"
@ -581,7 +631,7 @@ class AccountBasic extends Component {
> >
{getFieldDecorator('sex', { {getFieldDecorator('sex', {
rules: [{ rules: [{
required: true, required: true,
message: '请选择性别', message: '请选择性别',
}], }],
})( })(
@ -589,7 +639,7 @@ class AccountBasic extends Component {
<ConditionToolTip title="已完成实名认证，不能修改" condition={basicInfo.authentication != 'uncertified'} > <ConditionToolTip title="已完成实名认证，不能修改" condition={basicInfo.authentication != 'uncertified'} >
<Radio value="0" disabled={basicInfo.authentication != 'uncertified'}>男</Radio> <Radio value="0" disabled={basicInfo.authentication != 'uncertified'}>男</Radio>
<Radio value="1" disabled={basicInfo.authentication != 'uncertified'}>女</Radio> <Radio value="1" disabled={basicInfo.authentication != 'uncertified'}>女</Radio>
</ConditionToolTip> </ConditionToolTip>
</RadioGroup> </RadioGroup>
)} )}
</Form.Item> </Form.Item>
@ -602,19 +652,19 @@ class AccountBasic extends Component {
{getFieldDecorator('city', { {getFieldDecorator('city', {
rules: [{ rules: [{
type: 'array', type: 'array',
required: true, required: true,
message: '请先选择所在地', message: '请先选择所在地',
}], }],
})( })(
<City></City> <City></City>
)} )}
</Form.Item> </Form.Item>
<AccountBasicEditItem <AccountBasicEditItem
identity={identity} identity={identity}
getFieldDecorator = {getFieldDecorator} getFieldDecorator = {getFieldDecorator}
professionalFlag = {professionalFlag} professionalFlag = {professionalFlag}
basicInfo = {basicInfo} basicInfo = {basicInfo}
{...this.props} {...this.props}
{...this.state} {...this.state}
{...common} {...common}
form={this.props.form} form={this.props.form}
@ -630,7 +680,7 @@ class AccountBasic extends Component {
<div className="clearfix mt30 mb30"> */} <div className="clearfix mt30 mb30"> */}
<Button type="primary" onClick={this.handleSubmit} size="middle" className="saveBtn mr20 mt30">{"保存"}</Button> <Button type="primary" onClick={this.handleSubmit} size="middle" className="saveBtn mr20 mt30">{"保存"}</Button>
{this.props.basicInfo.base_info_completed && {this.props.basicInfo.base_info_completed &&
<Button type="" onClick={() => { this.props.history.push('/account/profile') }} size="middle" className="saveBtn cancelBtn mr20 mt30">{"取消"}</Button>} <Button type="" onClick={() => { this.props.history.push('/account/profile') }} size="middle" className="saveBtn cancelBtn mr20 mt30">{"取消"}</Button>}
{/* </div> {/* </div>
</Form.Item> */} </Form.Item> */}

Write Preview
Loading…
Cancel
Save